作用域插槽简单应用
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>
<th
v-for="(item, index) in columns"
:key="index"
class="th"
>
{{ item.title }}
</th>
</tr>
</thead>
<tbody>
<tr
class="data-item"
v-for="(data_row, data_index) in data"
:key="data_index"
>
<td
v-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>
效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b7b785a5e68ff36fafe808401d551b1f.png#pic_center)