arr:[name:‘张三’,address:[{age:10,gendra:'男'},{age:10,gendra:'男'}]],el-table两行展示
时间: 2024-02-07 17:04:15 浏览: 49
解决vue net :ERR_CONNECTION_REFUSED报错问题
您可以使用 el-table 的子表格功能来实现展示 arr 中 address 数组的数据,代码示例如下:
```vue
<template>
<el-table :data="arr" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column label="地址">
<template slot-scope="scope">
<el-table :data="scope.row.address" style="width:100%">
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gendra" label="性别"></el-table-column>
</el-table>
</template>
</el-table-column>
</el-table>
</template>
```
这样就可以实现将 arr 中的 address 数组展示为 el-table 的子表格,其中的 `scope.row.address` 表示当前行的 address 数组数据。
阅读全文