el-table prop为对象数组时,通过拆分合并单元格,多行展示数据
时间: 2023-11-28 20:05:47 浏览: 134
可以使用 `rowspan` 和 `colspan` 属性来实现拆分合并单元格展示数据。具体步骤如下:
1. 给需要合并的单元格添加 `rowspan` 和 `colspan` 属性,用于指定该单元格横向和纵向合并的单元格数。
2. 在数据中给需要合并的单元格设置相同的值,以便合并。
3. 在 `el-table` 中设置 `span-method` 属性,用于指定合并单元格的方法。
下面是一个示例代码:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<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-column v-for="(item, index) in tableData[0].scores" :key="index" :prop="'scores.' + index + '.subject'" :label="'科目' + (index + 1)">
<template slot-scope="scope">
<template v-if="scope.row.scores[index].rowspan && scope.row.scores[index].colspan">
<td :rowspan="scope.row.scores[index].rowspan" :colspan="scope.row.scores[index].colspan">{{ scope.row.scores[index].subject }}</td>
</template>
<template v-else>
<td
v-if="scope.row.scores[index].colspan"
:colspan="scope.row.scores[index].colspan"
v-else-if="scope.row.scores[index].rowspan"
:rowspan="scope.row.scores[index].rowspan"
>
{{ scope.row.scores[index].score }}
</td>
<td v-else>{{ scope.row.scores[index].score }}</td>
</template>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: '张三',
age: 20,
gender: '男',
scores: [
{
subject: '语文',
score: 90,
rowspan: 2, // 合并两行
colspan: 2 // 合并两列
},
{
subject: '数学',
score: 80,
rowspan: 0, // 不合并行
colspan: 0 // 不合并列
},
{
subject: '英语',
score: 70,
rowspan: 0,
colspan: 0
},
{
subject: '物理',
score: 60,
rowspan: 0,
colspan: 0
},
{
subject: '化学',
score: 50,
rowspan: 2,
colspan: 0 // 不合并列
}
]
},
{
name: '李四',
age: 22,
gender: '女',
scores: [
{
subject: '语文',
score: 85,
rowspan: 0,
colspan: 0
},
{
subject: '数学',
score: 75,
rowspan: 0,
colspan: 0
},
{
subject: '英语',
score: 65,
rowspan: 0,
colspan: 0
},
{
subject: '物理',
score: 55,
rowspan: 0,
colspan: 0
},
{
subject: '化学',
score: 45,
rowspan: 0,
colspan: 0
}
]
}
]
}
},
methods: {
spanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
if (rowIndex === 0) {
return {
rowspan: 2,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
} else {
let prevRow = this.tableData[rowIndex - 1]
if (prevRow) {
let prevValue = prevRow.scores[columnIndex].score
if (row.scores[columnIndex].score === prevValue) {
return {
rowspan: 0,
colspan: 0
}
} else {
let rowspan = 1
for (let i = rowIndex + 1; i < this.tableData.length; i++) {
if (this.tableData[i].scores[columnIndex].score === prevValue) {
rowspan++
} else {
break
}
}
return {
rowspan,
colspan: 1
}
}
} else {
return {
rowspan: 1,
colspan: 1
}
}
}
}
}
}
</script>
```
在上面的代码中,我们通过 `rowspan` 和 `colspan` 属性来指定需要合并的单元格,然后在 `el-table` 中设置 `span-method` 属性,用于指定合并单元格的方法。在 `spanMethod` 方法中,我们根据行和列的索引来判断需要合并的单元格,并返回相应的合并信息。需要注意的是,合并单元格时,需要保证相邻单元格的值相同才能合并。
阅读全文