arr:[name:‘张三’,addressList:[{age:10,gendra:'男'},{age:10,gendra:'男'}]]转成一维数组进行el-table展示
时间: 2024-02-07 19:04:19 浏览: 70
解决vue net :ERR_CONNECTION_REFUSED报错问题
您可以使用 `Array.prototype.map()` 和 `Array.prototype.flat()` 方法将二维数组 `addressList` 转换成一维数组,并将转换后的数据赋值给 `arr`,然后在 `el-table` 中展示该一维数组即可。具体实现如下:
```html
<template>
<el-table :data="arr">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
arr: []
}
},
mounted() {
const data = { name: '张三', addressList: [{ age: 10, gender: '男' }, { age: 10, gender: '男' }] }
this.arr = data.addressList.map(item => {
return {
name: data.name,
age: item.age,
gender: item.gender
}
}).flat()
}
}
</script>
```
在上述代码中,我们先将二维数组 `addressList` 转换成一维数组,并将转换后的数据赋值给 `arr`。在 `el-table` 中,我们使用 `prop` 属性来指定数据中对应的属性名,以展示数据。
阅读全文