el-table根据列表动态生成列
时间: 2023-07-12 20:52:48 浏览: 96
可以使用 `v-for` 循环遍历列表,然后在 `el-table-column` 中使用 `:prop` 属性绑定列数据的字段名,实现动态生成列的效果。
示例代码如下:
```html
<template>
<el-table :data="tableData">
<el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 18 },
{ name: 'Amy', age: 20 }
],
columns: [
{ prop: 'name', label: 'Name' },
{ prop: 'age', label: 'Age' }
]
}
}
}
</script>
```
在上述代码中,`columns` 数组存储了列的信息,包括 `prop` 和 `label`。在 `el-table` 中使用 `v-for` 循环遍历 `columns` 数组,使用 `:prop` 属性绑定列数据的字段名,使用 `:label` 属性绑定列头的名称。这样就可以根据列表动态生成列了。
阅读全文