vue里el-table动态增加列
时间: 2023-07-06 12:43:09 浏览: 1308
【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用demo, 开箱即用
要在 Vue 的 el-table 中动态增加列,你可以通过以下步骤实现:
1. 创建一个 data 属性,用于存储表格的列信息,例如:
```javascript
data() {
return {
tableData: [],
tableColumns: [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' }
]
}
}
```
2. 在 el-table 中使用 v-for 指令遍历 tableColumns 数组,动态生成表格列,例如:
```html
<el-table :data="tableData">
<el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column>
</el-table>
```
3. 在需要动态增加列的地方,通过修改 tableColumns 数组来更新表格列信息,例如:
```javascript
this.tableColumns.push({ prop: 'email', label: '邮箱' })
```
这样就可以动态地增加表格列了。需要注意的是,如果表格数据也是动态的,需要在更新 tableColumns 数组后重新获取表格数据,使表格头和表格内容保持一致。
阅读全文