el-table不使用v-for如何控制el-table-column的动态增减
时间: 2023-11-22 20:46:54 浏览: 94
el-table不使用v-for控制el-table-column的动态增减可以通过以下步骤实现:
- 在data中定义一个数组,用于存储el-table-column的配置信息。
- 在el-table中使用v-bind:columns绑定该数组。
- 在需要动态增减列的时候,修改该数组中的配置信息即可。
例如,我们可以在data中定义一个columns数组,用于存储el-table-column的配置信息:
data() {
return {
columns: [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
{ prop: 'gender', label: '性别' }
],
data: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' }
]
}
}
然后在el-table中使用v-bind:columns绑定该数组:
<el-table :data="data" :columns="columns"></el-table>
在需要动态增减列的时候,修改该数组中的配置信息即可。例如,我们可以在一个按钮的点击事件中添加一列:
methods: {
addColumn() {
this.columns.push({ prop: 'address', label: '地址' })
}
}
这样就可以动态增加一列地址。
阅读全文
相关推荐

















