vue.js - 如何在 Element UI 表格中显示嵌套单元格?
问题描述
我正在使用元素 UI。我有需要在表格中显示的嵌套数据。我无法理解如何显示嵌套数据的问题。
这是我的代码:
<el-table :data="tableData" stripe border>
<el-table-column width="170" prop="id"></el-table-column>
<el-table-column width="170">
<template slot-scope="scope">
<!-- -->
</template>
</el-table-column>
</el-table>
数据部分:
tableData: [
{
"id":1,
"nested": [{"name": "mike"}, {"name": "piter"}]
},
{
"id":2,
"nested": [{"name": "maria"}, {"name": "anna"}]
},
]
};
解决方案
一种解决方案是在 Element UI Table 中使用 span-method
首先,使用计算方法扁平化您的数据结构:
computed: {
expandData() {
return this.tableData.reduce((a, c) => {
const arr = c.nested.map(item => ({
id: c.id,
name: item.name
}))
a = a.concat(arr)
return a
}, [])
}
},
那么您的数据将变为:
[
{
"id": 1,
"name": "mike"
},
{
"id": 1,
"name": "piter"
},
{
"id": 2,
"name": "maria"
},
{
"id": 2,
"name": "anna"
}
]
之后定义objectSpanMethod
并使用它el-table
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
推荐阅读
- java - 如何使 STS 或 Maven 停止在项目目录中生成 JAR?
- sql - 将 24 小时时间更改为 12 小时时间的最佳方法?
- .htaccess - 子域重定向到 subdomain.domain.com/subdomain
- c - 除了第一个之外,所有压缩字段的 C 结构与压缩结构不同吗?
- python - 熊猫:用缺少分隔符分隔两列
- kubernetes - 塞尔登IO | sklearn_iris 和 sklearn_spacy_text | 不能在 k8s 中工作
- excel - 如何复制最后一行数据的范围并粘贴到它下面的行中
- java - Spring security:拒绝访问处理程序不起作用(xml配置+控制器方法上的预授权注释)
- c# - 无法使用锁在多线程上下文中实现数据解析
- c# - ASP.NET:从 System.Web.Caching.Cache 迁移到 Redis