el-table不使用v-for如何控制el-table-column的动态增减
时间: 2023-11-22 16:46:54 浏览: 81
el-form动态增减表单项==> el-table自定义列数并动态加载列
5星 · 资源好评率100%
el-table不使用v-for控制el-table-column的动态增减可以通过以下步骤实现:
1. 在data中定义一个数组,用于存储el-table-column的配置信息。
2. 在el-table中使用v-bind:columns绑定该数组。
3. 在需要动态增减列的时候,修改该数组中的配置信息即可。
例如,我们可以在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: '地址' })
}
}
```
这样就可以动态增加一列地址。
阅读全文