This article example shares the specific code of Vue using el-table to dynamically merge columns and rows for your reference. The specific content is as follows The form merge was needed in the project a few days ago, so I recorded it here for future use. First, I use el-table in element-ui. The document provides the span-method method to merge rows or columns. If you are not familiar with it, you can check out the element document address. However, the examples provided in the document are very simple and cannot meet the needs of complex pages, so you need to process the data. The following code: getListDataForRowAndColumn(data){ let self = this; self.rowAndColumn = []; self.rowRoomColumn = []; for (var i = 0; i < data.length; i++) { if (i === 0) { // If it is the first record (that is, when the index is 0), add 1 to the array self.rowAndColumn.push(1); self.pos = 0; self.rowRoomColumn.push(1); self.posT = 0; } else { //data[i].typeDesc is the field information you read from the interface, the same below if (data[i].typeDesc === data[i - 1].typeDesc) { // If typeDesc is equal, add and push 0 self.rowAndColumn[self.pos] += 1 self.rowAndColumn.push(0) if (data[i].areaDesc === data[i - 1].areaDesc) { // If areaDesc is equal, add and push 0 self.rowRoomColumn[self.posT] += 1 self.rowRoomColumn.push(0) } else { self.rowRoomColumn.push(1) self.posT = i } } else { // Not equal push 1 self.rowAndColumn.push(1) self.pos = i; self.rowRoomColumn.push(1) self.posT = i } } } }, The above code is to organize your data. The comments are very clear. I believe everyone can understand it. If you really can't understand it, just print it out and take a look. After processing the data, the span-method mentioned above is used. As shown in the figure: The objectSpanMethod method is as follows: objectSpanMethod({ row, column, rowIndex, columnIndex }) { let self = this if (columnIndex === 1) { if (self.rowAndColumn[rowIndex]) { let rowNum = self.rowAndColumn[rowIndex]; return { rowspan: rowNum, colspan: rowNum > 0 ? 1 : 0 } } return { rowspan: 0, colspan: 0 } } if (columnIndex === 2) { if (self.rowRoomColumn[rowIndex]) { let roomNum = self.rowRoomColumn[rowIndex]; return { rowspan: roomNum, colspan: roomNum > 0 ? 1 : 0 } } return { rowspan: 0, colspan: 0 } } }, Done, let's take a look at the effect picture Note that when using this method, the backend must sort the data before sending it out, otherwise the page may not achieve the desired effect. Because I started merging from the second column, the columnIndex in the objectSpanMethod method starts from 1. You can change it according to your actual situation. Put the data obtained from the interface into the getListDataForRowAndColumn method, and remember to define rowAndColumn and rowRoomColumn. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: What is the relationship between Mapper sql statement fields and entity class attribute names
>>: Best Practices for Deploying ELK7.3.0 Log Collection Service with Docker
Based on past experience, taking notes after comp...
Many web pages have small triangles in their navi...
Table of contents 1 Introduction to the new opera...
1. Warm and gentle Related address: http://www.web...
Find the problem When we display the contents in ...
1. Download 1. Download the installation package ...
Download mysql-5.7.19-winx64 from the official we...
Readonly and Disabled both prevent users from cha...
Some common statements for viewing transactions a...
Project scenario: When running the Vue project, t...
In the previous article, you have installed Docke...
Table of contents Typical waterfall website Water...
1Several common character sets In MySQL, the most...
Good morning everyone, I haven’t updated my artic...
This article shares the specific code of JavaScri...