el-table渲染二维数组
时间: 2023-10-04 15:04:16 浏览: 270
vue3 el-table多级表头收缩扩展的实现(JS原味版)
可以使用 `el-table` 的 `template` 属性和 `v-for` 指令来渲染二维数组。具体实现步骤如下:
1. 定义一个二维数组,例如:
```javascript
data: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]
```
2. 在 `el-table` 标签中使用 `template` 属性定义表格内容的模板,并使用 `v-for` 指令循环遍历每一行和每一列,例如:
```html
<el-table :data="data">
<template v-for="(row, rowIndex) in data">
<el-table-column :key="rowIndex">
<template slot-scope="scope">
{{ row[scope.$index] }}
</template>
</el-table-column>
</template>
</el-table>
```
在上面的代码中,`v-for` 循环遍历二维数组的每一行,然后在每一行中再使用 `v-for` 循环遍历每一列,并使用 `el-table-column` 标签定义表格列。在列的模板中,使用 `scope.$index` 获取当前列的索引,然后通过二维数组的行和列索引获取单元格的值并显示出来。
这样就可以渲染二维数组为表格了。
阅读全文