二维对象数组,使用el-table展示
时间: 2023-10-17 13:12:56 浏览: 97
vue+element获取el-table某行的下标,根据下标操作数组对象方式
二维对象数组可以使用`el-table`组件进行展示,具体实现方式如下:
```html
<template>
<el-table :data="tableData">
<el-table-column v-for="(item, index) in columnData" :key="index" :prop="item.key" :label="item.label"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
// 二维对象数组数据
data: [
{id: 1, name: '张三', age: 20},
{id: 2, name: '李四', age: 30},
{id: 3, name: '王五', age: 40}
],
// 表格列名
columnData: [
{key: 'id', label: '编号'},
{key: 'name', label: '姓名'},
{key: 'age', label: '年龄'}
]
};
},
computed: {
// 将二维对象数组转为el-table需要的数据格式
tableData() {
return this.data;
}
}
};
</script>
```
在上述代码中,我们通过`el-table`组件展示二维对象数组数据,其中`tableData`就是二维对象数组数据,`columnData`是一个数组,包含每列的属性名和列名,其中`key`表示属性名,`label`表示列名。在`<el-table-column>`标签中,我们使用`v-for`循环遍历`columnData`数组,动态生成表格的列,其中`:prop="item.key"`表示每个列的属性名为`item.key`,`:label="item.label"`表示每个列的名称为`item.label`。
阅读全文