el-table 动态显示操作列
时间: 2023-06-22 20:20:11 浏览: 93
如果你想要在 el-table 中动态显示操作列,可以使用 el-table 的 `column` 属性和 `v-if` 指令来实现。
以下是一个示例:
```html
<el-table :data="tableData" height="400" border>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column label="操作" v-if="showActions">
<template slot-scope="scope">
<el-button type="text" @click="handleEdit(scope.$index)">编辑</el-button>
<el-button type="text" @click="handleDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
```
在上面的示例中,我们使用了一个 `showActions` 变量来控制是否显示操作列。在 el-table-column 中添加了一个 `v-if` 指令,表示只有在 `showActions` 为 `true` 时,才会显示该列。
如果需要动态控制是否显示操作列,可以在需要的地方修改 `showActions` 变量的值。例如:
```js
export default {
data() {
return {
tableData: [...],
showActions: false
}
},
methods: {
toggleActions() {
this.showActions = !this.showActions
},
handleEdit(index) {
// ...
},
handleDelete(index) {
// ...
}
}
}
```
在上面的代码中,我们定义了一个 `toggleActions` 方法,用于切换 `showActions` 变量的值。当调用该方法时,操作列将会动态显示或隐藏。
希望这个示例能够帮助你实现 el-table 中动态显示操作列的功能。
阅读全文