想要在拿到每一行的数据之后,再遍历生成每一行的el-table-column,怎么做
时间: 2023-06-11 08:08:29 浏览: 248
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
你可以在获取到数据后,遍历它们,为每个数据项动态生成一列 `-table-column`。这可以通过 `v-for` 指令和计算属性实现。以下是一个示例代码:
```html
<template>
<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>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 28, gender: 'Male' },
{ name: 'Jane', age: 24, gender: 'Female' }
],
tableColumns: [
{ prop: 'name', label: 'Name' },
{ prop: 'age', label: 'Age' },
{ prop: 'gender', label: 'Gender' }
]
};
},
computed: {
tableColumns() {
// 遍历数据,动态生成列
const columns = [];
for (const prop in this.tableData[0]) {
columns.push({ prop, label: prop });
}
return columns;
}
}
};
</script>
```
在这个示例中,我们通过 `tableData` 数据来动态生成表格列,然后使用 `v-for` 指令来循环渲染这些列。我们使用计算属性 `tableColumns` 来动态生成列的配置,这个计算属性会遍历数据中的第一项,生成一个包含每个属性名和标签的对象,然后将这些对象放入一个数组中并返回。最终,我们将这个计算属性绑定到 `el-table-column` 组件的属性中,来动态渲染表格列。
阅读全文