el-table-column 自定义内容
时间: 2024-03-21 08:35:42 浏览: 106
vue el-table实现自定义表头
el-table-column 是 Element UI 中的一个表格列组件,用于定义表格的列。通过自定义内容,可以在表格列中展示自定义的内容。
要自定义 el-table-column 的内容,可以使用作用域插槽(scoped slot)。作用域插槽允许你在 el-table-column 中使用自定义的模板,并且可以访问到当前行的数据。
以下是一个示例,展示了如何使用作用域插槽来自定义 el-table-column 的内容:
```html
<el-table :data="tableData">
<el-table-column label="姓名">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="年龄">
<template slot-scope="scope">
<span>{{ scope.row.age }}</span>
</template>
</el-table-column>
</el-table>
```
在上面的示例中,我们通过 `slot-scope="scope"` 来声明作用域插槽,并且可以通过 `scope.row` 来访问当前行的数据。在模板中,我们可以根据需要展示数据或者进行其他操作。
阅读全文