Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of the span-method method of table merging for you. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

I have written some methods about merging element-ui tables before, but the data used are all definite data (dead data), but most of the time our data is obtained through the background and the data is unstable. When using table merging, you need to deal with the data first. First, take a look at a very common data display scenario.

If you go directly to the code, the HTML code will not be released. It's all about the same. Here's another scenario.

/ / the value returned by the simulation background getTable () {this.tableData = [{id: 1, region: 'China', type: [{sortName: 'equipment', sortList: [{name: 'device 1'}, {name: 'device 2'}]}, {sortName: 'software' SortList: [{name: 'Software 1'}, {name: 'Software 2'}, {name: 'Software 3'}]}, {id: 2, region: 'USA', type: [{sortName: 'device', sortList: [{name: 'device 1'} {name: 'device 2'}}, {sortName: 'software', sortList: [{name: 'software 1'}, {name: 'software 2'}]}] this.dealTable ()} / / processing tabular data dealTable () {let getDate = [] / / storing new tabular data let typeIndex = [0] / / saving id, let nameIndex = [0] / / values that need to be merged for saving types, let a / / id for saving types, and rows for merging all types of this.tableData.forEach ((v) Index) = > {if (v.type & & v.type.length) {a = 0 v.type.forEach ((subV, I, typeData) = > {if (subV.sortList & & subV.sortList.length) {subV.sortList.forEach ((ss, k)) Data) = > {if (k = data.length-1) {typeIndex.push (data.length) / / save the data length under each type a + = data.length / / add the data length under all types if (I = typeData.length-1) {nameIndex.push (a) / / the data length after the type loop is complete Save}} getDate.push ({id: v.id Region: v.region, type: subV.sortName, name: ss.name})})}}) console.log (nameIndex) / / [0,5,4] / / take a look at the rules printed out and remove the first item 5 is the first row to be merged / / the second merge is to merge 4 rows from the fifth row console.log (typeIndex) / / [0, 2, 3, 2, 2] / / the data storage rule is the same, the first merge 2 rows / / the second time starts from 2 rows, merges 3 rows, and so on / / according to this rule You only need to add two additional attributes to the data to control whether to merge or not, OK let k = 0 let t = 0 nameIndex.forEach ((v, I, nameArr) = > {if (nameArr [I + 1]) {getDate [k] .nameIndex = nameArr [I + 1] k + = nameArr [I + 1]}) typeIndex.forEach ((v, I) TypeArr) = > {if (typeArr [I + 1]) {getDate [t] .typeIndex = typeArr [I + 1] t + = typeArr [I + 1]}) this.tableData6 = getDate console.log (getDate) / / 0: {id: 1, name: "instrument 1", nameIndex: 5, region: "China", type: "instrument", typeIndex: 2}, / / 1: {id: 1, name: "instrument 2" Region: China, type: instruments} / /. / 5: {id: 2, name: "device 1", nameIndex: 4, region: "USA", type: "device", typeIndex: 2}}, / / Table merging method arraySpanMethod ({row, column, rowIndex, columnIndex}) {if (columnIndex = 0 | | columnIndex = = 1) {if (row.nameIndex) {/ / if there is a value, it indicates that return [row.nameIndex, 1]} else return [0] needs to be merged. 0]} if (columnIndex = 2) {if (row.typeIndex) {return [row.typeIndex, 1]} else return [0,0]}}

Let's talk about another scenario, which is implemented in another way, and the principle is more or less the same.

Suppose the data returned by the backend looks like this:

In this case, we usually choose to merge the rows, because the columns of the table are known at this time. As long as the columns that need to be merged are extracted, the parallel is OK. Let's look at the code below.

Js code, first need to deal with the background data

GetIndex () {let arr = [] let s = 0 let table = this.tableData6 let getTable = [] table.forEach ((item, I, data) = > {if (arr.length) {s = arr [arr.length-1] .row + data [I-1] .company.length} arr.push ({row: s) Index: item.company.length}) if (item.company & & item.company.length) {item.company.forEach (subItem = > {getTable.push ({id: item.id, region: item.region, type: item.type, company: subItem.name})}) this.arr = arr this.tableData6 = getTable}

Table merging occurs after data processing

/ / merge table method arraySpanMethod ({row, column, rowIndex, columnIndex}) {if (columnIndex = 0 | | columnIndex = 1 | | columnIndex = 2) {let obj = [0,0] this.arr.some (v = > {if (rowIndex = v.row) {obj = [v.index, 1]}) return obj}}

The result page has been wrong, debugger for a while, found that the function did not receive the data returned by return, this is because I wrote code after return, the function really ended with no return value. So in the function, don't write and execute code after return.

After the correct writing, debugger can receive the correct return value.

This is the end of the article on "sample Analysis of span-method method for Table merging". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.