<el-table :data="data">
<template v-for="column in columns" :key="column.prop">
<el-table-column :prop="column.prop" :label="column.label">
<!-- 作用域插槽 -->
<template v-slot:default="scope">
<div>{{scope.row[column.prop]}}</div>
</template>
</el-table-column>
</template>
</el-table>
在el-table基础上进行二次封装,并向外部抛出scope插槽供页面使用
scope插槽作用域参数:
{
row, //data当前行数据,
col // columns当前列对象
}
<el-table :data="data">
<template v-for="column in columns" :key="column.prop">
<el-table-column :prop="column.prop" :label="column.label">
<!-- 作用域插槽 -->
<template v-slot:default="scope">
<slot name="scope" :row="scope.row" :col="column">
<!-- 插槽后备内容: 组件引用 innerHTML无内容时渲染 -->
<!-- <my-table :data="data" :columns="columns"></my-table> -->
<slot name="default">
<div>{{scope.row[column.prop]}}</div>
</slot>
<!-- 使用scope插槽 -->
<!-- <my-table :data="data" :columns="columns">
<template v-slot:scope="scope">
<div>插槽收到的参数:scope: {row: 行数据,col: 表格列对象}</div>
</template>
</my-table> -->
</slot>
</template>
</el-table-column>
</template>
</el-table>