Hello everyone, I'm back again. Recently, a friend asked me such a question, that is, now I call the interface, get a batch of table data, and then display it on the page, but merge it according to the id of each row and the content of that column, and then add Operations such as sub-data, edit and delete (here only talk about merging tables)
Directly on the picture, direct rendering looks like this
Requirement: Merge rows according to occupation id, the first column and the last column must be merged, how to do this? First, upload the template code. This is nothing to say, it is an el-table, and the column that is operated is a scope slot
<template>
<div>
<el-table :data="tableData" :span-method="spanMethod">
<el-table-column prop="job" label="职业id">
</el-table-column>
<el-table-column prop="ename" label="名字"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column label="操作">
<template>
<el-button type="success" icon="el-icon-edit" size="mini"></el-button>
<el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>Among them, since we want to merge cells, of course we need to use the span-method, and translation is the way to merge tables. In html, we learned rowspan and colspan, merge rows and merge columns.
The content of the script will be written below, without further ado, just upload the code
<script>
export default {
data() {
return {
tableData: [
{
job: 1,
ename: "咕叽咕叽",
age: 21
},
{
job: 1,
ename: "哆啦哆啦",
age: 22
},
{
job: 2,
ename: "后端1",
age: 27
},
{
job: 2,
ename: "后端2",
age: 21
},
{
job: 2,
ename: "后端3",
age: 22
},
{
job: 3,
ename: "主管1",
age: 27
},
{
job: 3,
ename: "主管2",
age: 28
},
{
job: 4,
ename: "总监",
age: 28
},
]
}
},
methods: {
//合并的方法，里面row，colomn是这一行这一列的对象，rowIndex和colIndex就是行列的index 从0-n rowspan表示合并的行 大于1表示要往下合并了，然后下方被合并的rowspan就是0，0代表被合并了，1代表正常情况
spanMethod({ row, column, rowIndex, columnIndex }) {
//columnIndex代表哪几列需要合并，后面会用
let columnArr = [0, 3]
let jobArr = []; //所有职业id 从第一个数据到最后一个
for (let k in this.tableData) {
jobArr.push(this.tableData[k].job)
}
let obj = {}
for (let i = 0; i < jobArr.length; i++) {
if (obj[jobArr[i]] == undefined) {
obj[jobArr[i]] = 1
} else {
obj[jobArr[i]]++
}
}
console.log("obj", obj); //包含每个id以及其出现的次数，为后面合并做铺垫
let spanArr = []; //每一行就是一条数据，该数组每一个值就是当前行的rowspan数
let doneArr = [] //保存被合并了的id，如果再出现，表示被合并
for (let i = 0; i < jobArr.length; i++) {
//看看个数
if (doneArr.includes(jobArr[i])) {
//如果这个id被合并过了，说明刚刚上方有一样的id，这一项就是被合并的
spanArr.push(0)
} else {
//如果没合并，就往下合并，spanArr里推入这个id的个数，在obj中就有
spanArr.push(obj[jobArr[i]])
//别忘了合并完把id放进doneArr中
doneArr.push(jobArr[i])
}
}
//如果是第0列和第3列
if (columnArr.includes(columnIndex)) {
//遍历合并个数的数组
for (let i = 0; i < spanArr.length; i++) {
//如果是该行，行合并个数就是这一项的值，列不合并，所以是1
if (rowIndex == i) {
return {
rowspan: spanArr[i],
colspan: 1
}
}
}
}
}
},
}
</script>Rowspan indicates the merged row, greater than 1 indicates that it is going to be merged downwards, so the rowspan to be merged below is 0, 0 means it is merged , and 1 means it is normal (that is, not merged)
The actual working data will be more complicated. At this time, the columns/rows that need to be merged are placed in an array, and then includes is used to determine whether the column/row needs to be merged. Then calculate spanArr (the array of numbers that need to be merged in each row), and then return.
The final figure is as follows
This solves the problem, go and try it!