element-plus 2.2.30版本中里面的 table 如何动态列渲染
时间: 2024-06-08 21:11:06 浏览: 13
在 element-plus 的 table 中动态渲染列可以通过以下步骤实现:
1. 定义一个数组来存储表格的列信息,例如:
```javascript
const columns = [
{ label: '姓名', prop: 'name' },
{ label: '年龄', prop: 'age' },
{ label: '性别', prop: 'gender' }
];
```
2. 在模板中使用 `<el-table-column>` 标签来渲染表格列,例如:
```html
<el-table :data="tableData">
<el-table-column v-for="column in columns" :label="column.label" :prop="column.prop" />
</el-table>
```
3. 在组件中使用 `this.columns` 和 `this.tableData` 来动态更新表格列和数据,例如:
```javascript
export default {
data() {
return {
columns: [
{ label: '姓名', prop: 'name' },
{ label: '年龄', prop: 'age' },
{ label: '性别', prop: 'gender' }
],
tableData: []
};
},
methods: {
// 动态更新表格列和数据
updateTable() {
this.columns.push({ label: '地址', prop: 'address' });
this.tableData.push(
{ name: '张三', age: 18, gender: '男', address: '北京市海淀区' },
{ name: '李四', age: 20, gender: '女', address: '上海市浦东新区' }
);
}
}
};
```
以上就是使用 element-plus 的 table 动态渲染列的基本步骤。注意,如果需要删除或修改列,可以通过数组的 `splice` 方法来实现。