动态修改el-table-column的label的内容
时间: 2023-06-16 14:03:04 浏览: 1256
可以通过使用 `scopedSlots` 来动态修改 `el-table-column` 的 `label` 内容。具体步骤如下:
1. 在 `el-table-column` 中添加 `scopedSlots` 属性,并设置为一个函数。
2. 在函数中,返回一个包含 `header` 属性的对象,用来动态设置 `label` 的内容。
示例代码如下:
```html
<el-table :data="tableData">
<el-table-column prop="name">
<template v-slot:header="{ column }">
<span>{{ column.label }}</span>
<el-button type="text" @click="changeLabel(column)">修改</el-button>
</template>
</el-table-column>
<el-table-column prop="age"></el-table-column>
</el-table>
```
```js
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
}
},
methods: {
changeLabel(column) {
// 修改 label 内容
column.label = '姓名(已修改)'
}
}
}
```
在上面的示例中,我们在 `el-table-column` 中添加了一个 `scopedSlots` 属性,并设置为一个函数。在函数中,我们通过 `header` 属性动态设置了 `label` 的内容,并在模板中添加了一个按钮,用来触发修改 `label` 的操作。
在 `changeLabel` 方法中,我们获取到了当前列的 `column` 对象,并通过修改 `label` 属性来动态修改 `label` 的内容。