vue使用elementui动态生成不固定列的table表格
时间: 2023-12-02 20:04:11 浏览: 83
您好!可以使用 Element UI 的 `<el-table>` 标签和 `<el-table-column>` 标签来实现动态生成不固定列的表格。下面是一个示例代码:
```
<template>
<el-table :data="tableData">
<el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
columns: [
{ label: '姓名', prop: 'name' },
{ label: '年龄', prop: 'age' },
{ label: '性别', prop: 'gender' },
// 可以根据需要添加更多列
],
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' },
// 可以根据需要添加更多数据
]
};
}
};
</script>
```
上面的代码中,`columns` 数组用来定义表格的列,每个元素都是一个对象,包含 `label` 和 `prop` 两个属性,分别表示列的标题和数据属性名。`tableData` 数组用来定义表格的数据,每个元素都是一个对象,属性名对应 `columns` 数组中的 `prop` 属性。
在模板中,使用 `v-for` 指令循环渲染 `<el-table-column>` 标签,根据 `columns` 数组的长度动态生成表格列。需要注意的是,`<el-table-column>` 中的 `prop` 属性必须与 `tableData` 数组中的对象属性名相同,否则表格无法正确显示数据。
希望对您有帮助!