element-ui merge table row operation
Requirement Description
After dynamically obtaining data, merge rows with the same ID and ID into one.
official method
rowIndexThe current row number columnIndexand the current column number rowindicate the contents of the current row and columnthe contents of the current column. arraySpanMethod returns an object whose keys are rowspan and colspan, rowspan indicates the number of rows occupied by the current grid, and colspan indicates the number of columns occupied by the current grid.
From this, we can know that the current method will be called when each row is rendered, but the number of rows and columns it merges is set during the rendering process, so as to obtain different effects. rowIndexThe sum columnIndexstarts from 0, rowIndex=0when row is the element of the array [0].
arraySpanMethod({
row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
//用于设置要合并的列
if (rowIndex % 2 === 0) {
//用于设置合并开始的行号
return {
rowspan: 2, //合并的行数
colspan: 1 //合并的列数，设为０则直接不显示
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
Data processing
Since element is rendered line by line, the merge function will be called for each grid during rendering, and the return value of the merge function is obtained to determine the rows and columns occupied by the current grid, so the data is best prepared in a row-by-row format.
//table是一个数组，表示全部的数据
const table = [{
},{
//每一个元素是一个对象，表示一行
},{
}]
Assuming that the data transmitted from the background is in the following format, the data needs to be processed.
const table = {
"123": [
{
"name": "张三",
"number": "123",
},
{
"name": "张三",
"number": "1234",
}
],
"1234": [
{
"name": "王五",
"number": "213"
},
]
}
//映射方法
function mapper(): Array<validationResults> {
const info: Array<validationResults> = [];
for (const [id, personInfo] of Object.entries(table)) {
personInfo.forEach((person) => {
info.push({
id,
name: person.name,
number: person.number,
});
});
}
return errorInfo;
}
Row number merging
The first thing that needs to be clarified is which row's first column needs to be merged? idThe same columns need to be merged (the data here is ordered, and the same id is next to each other).
How many columns need to be merged? The method provided by element-ui directly returns the merged rows and columns, so we need a method to calculate the merged rows.
Generate an array with the same number of rows to record the number of merges set for each row
const mergerow = [];
//获取需要合并的行号
function getMergeRow(data) {
let pos;//记录需要合并的第一行坐标
for (let i = 0; i < data.length; i++) {
if (i === 0) {
mergerow.push(1);
pos = 0
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].id=== data[i - 1].id) {
//如果相同表示当前行需要合并
mergerow[pos] += 1; //合并的行数+1
mergerow.push(0); //相同的被合并
} else {
//id不同说明，是下一个需要合并的第一行
mergerow.push(1);
pos = i;
}
}
}
};
//element-ui提供的方法
function cellMerge({
row, column, rowIndex, columnIndex }) {
let _col = 1;
let _row = 1;
if (columnIndex === 0) {
_row = mergerow[rowIndex];
_col = _row > 0 ? 1 : 0;
}
return {
rowspan: _row,
colspan: _col,
};
}
final data table
<template>
<div>
<el-table
border
:data="tableData"
style="width: 100%;max-height: 160px;overflow: auto"
:span-method="cellMerge">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="number"
sortable
label="数值 1">
</el-table-column>
</el-table>