vue 二维数组 生成 el-table-column
时间: 2023-11-22 11:49:17 浏览: 138
根据提供的引用内容,可以看出需要根据一个二维数组生成el-table-column。下面是一个基于Vue的实现方法:
1.在Vue组件中定义一个二维数组dataList和一个表头数组dataColumn,用于存储数据和表头信息。
2.使用v-for指令遍历表头数组dataColumn,生成el-table-column。
3.在el-table-column中使用template标签,使用slot-scope指令获取当前行的数据,使用v-for指令遍历表头数组dataColumn,根据当前列的索引获取当前行的数据。
4.将获取到的数据渲染到表格中。
下面是一个示例代码:
```html
<template>
<el-table style="width: 100%" :data="dataList">
<el-table-column v-for="(item,index) in dataColumn" :key="index" :label="item" align="center">
<template slot-scope="scope">
<span>{{ scope.row[index] }}</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
dataColumn: ['姓名', '年龄', '性别'],
dataList: [
['张三', 18, '男'],
['李四', 20, '女'],
['王五', 22, '男']
]
}
}
}
</script>
```
阅读全文