The table component of Vue Element-UI supports merging rows or columns, here is a simple study note. We can merge cells through rowspan and colspan, so what do these two attributes mean? Let's discuss it
through the official demo .
The above cell merges the first column and the second column whose row index is an odd number into one cell: the effect is to display the content of the first column and hide the content of the second column.
code show as below
arraySpanMethod({
row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2];//表示该行 行占有一个单元格空间，列占有两个单元格的空间
} else if (columnIndex === 1) {
return [0,0];//行占有0个单元格，列占有0个单元格的空间，这样就实现了该单元格的隐藏。
}
}
},
//或者
arraySpanMethod({
row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return {
rowspan: 1,
colspan: 2
};
} else if (columnIndex === 1) {
return {
rowspan: 0,
colspan: 0
};
}
}
},
From the effect point of view, the principle of cell merging is summarized as follows: Before merging, the space occupied by each cell of Table is the same, [1,1]or { rowspan:1, colspan:1 };, cell merging is to expand the space occupied by the target cell, and The target cell occupies the space of the surrounding cells; in order not to cause data confusion, it is necessary to set the space occupied by the occupied cell to or (it [0,0]can { rowspan: 0, colspan: 0 };also be set to [1,0]or { rowspan: 1, colspan: 0 };or [0,1]or after testing { rowspan: 0, colspan:1 };), otherwise the occupied cell , and the cells in the adjacent row or column should be pushed aside. , if you remove reuturn [0,0], you can see the crowding effect: Wang Xiaohu, who was originally in the second column, ran to the third column because he did not set [0,0] to hide it, resulting in the corresponding The columns move to the right in turn.
Summary: rowspan : how many rows a cell occupies , colspan : how many columns a cell occupies