如何在Element UI table中显示嵌套单元格?
How to display nested cells in Element UI table?
我正在使用 Element UI。我有需要在 table 中显示的嵌套数据。无法理解如何显示嵌套数据的问题
这是我的代码:
<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"}]
},
]
};
https://jsfiddle.net/3nhb79qc/
我想显示如下:
一种解决方案是使用 span-method in Element UI Table
首先,使用计算方法扁平化数据结构:
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
};
}
}
}
我正在使用 Element UI。我有需要在 table 中显示的嵌套数据。无法理解如何显示嵌套数据的问题
这是我的代码:
<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"}]
},
]
};
https://jsfiddle.net/3nhb79qc/
我想显示如下:
一种解决方案是使用 span-method in Element UI Table
首先,使用计算方法扁平化数据结构:
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
};
}
}
}