Vue uses el-table to dynamically merge columns and rows

Vue uses el-table to dynamically merge columns and rows

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:
  • vue elementUI table custom header and row merge example code
  • Vue realizes the effect of merging columns in data table rowspan
  • Vue realizes merging the same data in an array
  • Vue.js implements table merging example code
  • Antd vue table merges cells across rows and customizes content instances
  • In vue, elment-ui table merges the same data cells in the upper and lower rows
  • Implementation of merging multiple columns of Vue cells
  • Vue dynamically merges cells and adds subtotals function example
  • require.js loads vue component r.js merged and compressed example
  • Vue Elenent realizes merging the same data columns in the table

<<:  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

Recommend

Tutorial on installing Android Studio on Ubuntu 19 and below

Based on past experience, taking notes after comp...

CSS navigation bar menu with small triangle implementation code

Many web pages have small triangles in their navi...

Handwriting implementation of new in JS

Table of contents 1 Introduction to the new opera...

Analysis of the methods of visual structure layout design for children's websites

1. Warm and gentle Related address: http://www.web...

MySQL common statements for viewing transactions and locks

Some common statements for viewing transactions a...

Analysis of idea compiler vue indentation error problem scenario

Project scenario: When running the Vue project, t...

How to deploy your first application with Docker

In the previous article, you have installed Docke...

Implementation of waterfall layout + dynamic rendering

Table of contents Typical waterfall website Water...

Detailed explanation of character sets and validation rules in MySQL

1Several common character sets In MySQL, the most...

The best explanation of HTTPS

Good morning everyone, I haven’t updated my artic...

JavaScript to achieve simple drag effect

This article shares the specific code of JavaScri...