作用域插槽簡單應用

Parent.vue

<template><div class="content"><Child:data="data":columns="columns"><template slot="name" slot-scope="{ row }">姓名：{{ row.name }}</template><template slot="age" slot-scope="{ row }">{{ row.age }} -- {{ row.age }}</template><template slot="action" slot-scope="{ row }"><a href="javascript:;" @click="edit(row)">編輯</a></template></Child></div> </template><script> import Child from "@/components/Child";export default {name: "Parent",components: {Child,},data() {return {data: [{name: "John Brown",age: 18,address: "New York No. 1 Lake Park",},{name: "Jim Green",age: 24,address: "London No. 1 Lake Park",},{name: "Joe Black",age: 30,address: "Sydney No. 1 Lake Park",},{name: "Jon Snow",age: 26,address: "Ottawa No. 2 Lake Park",},],columns: [{title: '姓名',key: 'name',},{title: '年齡',key: 'age',},{title: '地址',key: 'address',},{title: '操作',key: 'action',}]};},methods: {edit(row) {console.log(row.name);}} }; </script><style scoped> .content {width: 800px; } </style>

Child.vue

<template><table border class="table"><thead><tr><thv-for="(item, index) in columns":key="index"class="th">{{ item.title }}</th></tr></thead><tbody><trclass="data-item"v-for="(data_row, data_index) in data":key="data_index"><tdv-for="(item, index) in columns":key="index"><template v-if="$scopedSlots[item.key]"><slot :name="item.key" :row="data_row"></slot></template><template v-else>{{ data_row[item.key] }}</template></td></tr></tbody></table> </template><script> export default {name: 'Child',props: {data: {type: Array,required: true,default() {return []}},columns: {type: Array,required: true,default() {return []}}}, } </script><style scoped> .table {width: 100%; }.th {height: 40px;text-align: center; }.data-item {height: 48px; }td {text-align: center; } </style>

效果圖

總結

以上是生活随笔為你收集整理的作用域插槽简单应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。