Element-UI Table-column Scoped Slot 自定义
el-table-column组件提供了多个scoped-slot, 可以更加灵活地自定义列的内容
- header:用于自定义表头的内容
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄">
<!-- 自定义表头内容 -->
<template slot="header" slot-scope="scope">
<span>自定义表头</span>
</template>
</el-table-column>
</el-table>
- default:用于自定义单元格的内容
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄">
<!-- 自定义单元格内容 -->
<template slot-scope="scope">
<span>{{ scope.row.age }}</span>
<el-button @click="edit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
- header 和 default 的结合使用
<el-table :data="tableData">
<el-table-column prop="name" label="姓名">
<!-- 自定义表头和单元格内容 -->
<template slot="header" slot-scope="scope">
<span>自定义表头</span>
</template>
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
<el-button @click="edit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>