el-table-column的label根据列的属性值改变
时间: 2023-10-24 19:13:37 浏览: 92
el-table无限滚动+控制列是否显示+列排序(非json)
5星 · 资源好评率100%
如果你想根据列的属性值来动态改变 el-table-column 的 label,可以使用作用域插槽(scoped slot)。
首先,在 el-table-column 中设置作用域插槽:
```html
<el-table-column prop="columnName" label="Column Label">
<template slot-scope="{ row }">
{{ row.columnName }}
</template>
</el-table-column>
```
在这个例子中,`prop` 属性定义了要显示的行数据的属性名,`label` 属性定义了列的标签。然后,我们在模板中定义了一个作用域插槽,它的参数是 `row`,表示当前行的数据对象。我们可以使用 `row.columnName` 来动态显示列的标签。
接下来,在数据源中定义每一列的 `columnName` 属性:
```js
data: [
{
columnName: 'Column 1',
// 其它行数据
},
{
columnName: 'Column 2',
// 其它行数据
},
// 其它行数据
]
```
当 el-table-column 渲染出来时,它会使用作用域插槽中的模板来显示每一行的数据。因此,列的标签会根据每一行的 `columnName` 属性动态改变。
阅读全文