vue2中el-table是v-for遍历出来,该表格下的列el-table-column也是v-for动态遍历出来,如何实现
时间: 2024-10-16 17:13:28 浏览: 43
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
在Vue 2中,如果你需要动态创建`el-table`和`el-table-column`,你可以结合`v-for`循环以及对象数组(Array of Objects)来实现。假设你有一个数据结构类似这样的:
```javascript
data() {
return {
tableData: [
{ columns: ['姓名', '年龄', '职位'] },
{ columns: ['张三', 25, '工程师'] },
{ columns: ['李四', 30, '经理'] }
]
};
}
```
在这种情况下,你可以这样做:
```html
<template>
<div>
<el-table v-for="item in tableData" :key="item.index">
<el-table-column v-for="(column, index) in item.columns" :key="index" :prop="column" :label="column"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
// ... (如上)
},
methods: {
// 如果有特定的索引,可以使用item.index,如果没有则默认0
getRowIndex(item) {
return item.index || 0;
}
}
};
</script>
```
在这个例子中,每个`tableData`项都会生成一个新的`el-table`,并且内部的`columns`属性会对应生成对应的`el-table-column`。`:prop`用于指定列的数据源,`:label`设置列的标题。
阅读全文