el-table自定义显示规则
时间: 2023-08-05 14:05:57 浏览: 48
您可以使用 `scoped slots` 来自定义 `el-table` 的显示规则。 `scoped slots` 可以让您自定义表格中每个单元格的内容。以下是一个例子:
```html
<el-table :data="tableData">
<el-table-column label="Name">
<template slot-scope="scope">
<span v-if="scope.row.age < 18">{{ scope.row.name }}</span>
<span v-else>{{ scope.row.name }} (Adult)</span>
</template>
</el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
```
在这个例子中,我们使用了 `scoped slots` 来自定义表格中的 `Name` 列。我们检查每个行数据的 `age` 属性,如果小于 18 岁,我们只显示 `name` 属性,否则我们显示 `name` 属性和 `(Adult)`。
您可以在 `el-table-column` 组件中使用 `scoped slots` 来自定义每个列的显示规则。要使用 `scoped slots`,您需要使用 `template` 标签,并将 `slot-scope` 属性设置为 `scope`。在模板中,您可以使用 `scope.row` 来访问行数据,使用 `scope.column` 来访问当前列的属性。