el-table怎么处理二维数组
时间: 2023-10-14 17:19:00 浏览: 190
如果你想在 `el-table` 中展示一个二维数组,可以使用 `el-table` 的嵌套表格功能。具体步骤如下:
1. 在 `data` 中定义一个二维数组,例如 `tableData`。
2. 在 `el-table` 中使用 `el-table-column` 渲染第一列,作为二维数组的行名。
3. 在 `el-table-column` 中,使用 `template` 渲染第二列,作为二维数组的值。在 `template` 中,使用 `el-table` 嵌套一个子表格,子表格的数据源为当前行的二维数组。
以下是示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="rowName" label="行名"></el-table-column>
<el-table-column label="值">
<template slot-scope="{ row }">
<el-table :data="row.rowValues">
<el-table-column prop="value" label="列名"></el-table-column>
<el-table-column prop="data" label="数据"></el-table-column>
</el-table>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ rowName: 'row1', rowValues: [{ value: 'col1', data: 'data1' }, { value: 'col2', data: 'data2' }] },
{ rowName: 'row2', rowValues: [{ value: 'col1', data: 'data3' }, { value: 'col2', data: 'data4' }] },
],
};
},
};
</script>
```
在上面的代码中,`tableData` 是一个二维数组,其中每一行包含一个行名和一个表示该行对应的值的数组。在 `el-table` 中,第一列使用 `prop="rowName"` 渲染行名,第二列使用 `template` 渲染值。在 `template` 中,使用 `el-table` 嵌套一个子表格,子表格的数据源为当前行的 `rowValues` 数组。子表格的第一列使用 `prop="value"` 渲染列名,第二列使用 `prop="data"` 渲染数据。这样就可以在 `el-table` 中展示一个二维数组了。
阅读全文