vue使用elementui动态生成不固定列的table表格
时间: 2023-12-02 18:04:12 浏览: 85
可以使用`<el-table>`和`<el-table-column>`组件来动态生成不固定列的table表格,具体步骤如下:
1. 在Vue组件中定义表格数据和表格列的数组,例如:
```
<template>
<el-table :data="tableData">
<el-table-column v-for="column in tableColumns" :prop="column.prop" :label="column.label">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [], // 表格数据
tableColumns: [] // 表格列的数组
}
},
methods: {
// 动态设置表格列
setTableColumns() {
// 获取表格列的数据,例如从后台接口获取
const columnsData = [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' }
]
// 将表格列的数据赋值给表格列的数组
this.tableColumns = columnsData
}
},
mounted() {
// 初始化表格列
this.setTableColumns()
// 获取表格数据,例如从后台接口获取
const tableData = [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 }
]
// 将表格数据赋值给表格数据
this.tableData = tableData
}
}
</script>
```
2. 在`<el-table>`组件中使用`v-for`指令动态生成表格列,通过`:prop`和`:label`属性绑定表格列的数据。
3. 在需要动态改变表格列的时候,调用`setTableColumns`方法来改变表格列的数组,表格会自动更新。
阅读全文