Vue.js Implementation Table Merge sample code _javascript tips

Objective

Because the use of Vue, think of MVVM is to use data-driven thinking, so consider in the model, instead of rendering data to do DOM operation, of course, basic CSS or to have. So this method works for all data-driven frameworks, such as angular and react.

The final implementation effect is this:

Realize the idea

The original code length of the normal form is this:

<TR v-for= "Item in Items" >
 <td width= "3%" >{{$index + 1}}</td> <td width=
 "15%" >{{ item.bso_name}}</td>
 <td width= "8%": class= "{' Overtime ': Overtime" (item. GATHDT)} ">{{item. GATHDT | time}}</td>
 <td width= "5%" >{{item. f1}}</td>
 <td width= "5%" >{{item. f2}}</td>
 <td width= "5%" >{{item. f4}}</td>
 <td width= "5%" >{{item. f3}}</td>
 <td width= "5%" >{{item. f5}}</td>
 <td width= "5%" >{{item. f6}}</td>
 <td width= "5%" >{{item. f7}}</td>
 <td width= "5%" >{{item. f8}}</td>
 <td width= "5%" >{{item. f9}}</td>
 <td width= "5%" >{{item. F10}}</td>
</tr>

First take the normal form to do the test, the original <td> label has rowspan attributes to support cell row merge, attribute value refers to the number of merged downward, in fact, is equivalent to the line down and added a few cells.

Because, if the next line will be rendered, it will be squeezed down, therefore, the following merged cells to hide, through the display: none; CSS control.

Therefore, each <td> label needs to have two property values, rowspan and display to control the number of merged rows per cell and whether it is displayed.

The code becomes like this.

&LT;TR v-for= "Item in Items" > <td width= "3%" >{{$index + 1}}</td> <td width= "10%": rowspan= "ITEM.BSO" _namespan ': class= ' {Hidden:item.bsO_Namedis} ' >{{item.bsO_Name}}</td> <td width= ' 8% ': ' rowspan= ' item. Gathdtspan ": class=" {Hidden:item. Gathdtdis} ": class=" {overtime:overtime (item. GATHDT)} ">{{item. GATHDT | time}}</td> <td width= "5%": rowspan= "item. F1span ": class=" {Hidden:item. F1dis} ">{{item. f1}}</td> <td width= "5%": rowspan= "item. F2span ": class=" {Hidden:item. F2dis} ">{{item. f2}}</td> <td width= "5%": rowspan= "item. F3span ": class=" {Hidden:item. F3dis} ">{{item. f3}}</td> <td width= "5%": rowspan= "item. F4span ": class=" {Hidden:item. F4dis} ">{{item. f4}}</td> <td width= "5%": rowspan= "item. F5span ": class=" {Hidden:item. F5dis} ">{{item. f5}}</td> <td width= "10%": rowspan= "item. F6span ": class=" {Hidden:item. F6dis} ">{{item. f6}}</td> <td width= "8%": rowspan= "item. F7span ":Class= "{Hidden:item. F7dis} ": class=" {overtime:overtime (item. F7)} ">{{item. F7 | time}}</td> <td width= "5%": rowspan= "item. F8span ": class=" {Hidden:item. F8dis} ">{{item. f8}}</td> <td width= "5%": rowspan= "item. F9span ": class=" {Hidden:item. F9dis} ">{{item. f9}}</td> <td width= "5%": rowspan= "item. F10span ": class=" {Hidden:item. F10dis} ">{{item. f10}}</td> <td width= "5%": rowspan= "item. F11span ": class=" {Hidden:item. F11dis} ">{{item. F11}}</td> </tr>

Among them, these two properties have some characteristics:

The cell to be displayed rowspan is a >1 value that records the number of rows that follow

The cells you want to display are displaytrue

The cell that is not displayed next is rowspan 1 and display isfalse

Only one row of data cells rowspan is 1 and display istrue

is actually designing an algorithm that adds two attributes to each data item for the input table array, rowspan and the display computed rowspan value is

The number of rows of the same value in this column, and rowspan whether the value computed by the value is display displayed, and finally the changed array output.

Resolve Sample Code

function Combinecell (list) {for
 (field in list[0]) {
  var k = 0;
  while (K < list.length) {
   List[k][field + ' span '] = 1;
   List[k][field + ' dis '] = false;
   for (var i = k + 1; I <= list.length-1 i++) {
    if (list[k][field] = = List[i][field] && List[k][field]!= ') {
     List[k][field + ' span ']++;
     List[k][field + ' dis '] = false;
     List[i][field + ' span '] = 1;
     List[i][field + ' dis '] = true;
    } else {break
     ;
    }
   }
   K = i;
  }
 }
 return list;
}

Summarize

The code is actually very short very simple, mainly by means of the idea of KMP, define a pointer K, start pointing to the first value, and then compare down to this pair rowspan and display set,

If you encounter a different value is judged to jump out, the next loop, the notification pointer K plus the operation of the number of lines, to jump, and then compare the value of the next cell, and kmp the pointer jump to judge the same principle of the same string.

This function can be used to combineCell() filter the data back to the network, append the corresponding value and then the Vue monitored array of assignment operations on it.

In fact, this method is not only suitable for VUE, data-driven framework, including angular and react, in order to achieve table merging, the request back to filter the value of OK.

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if you have questions you can message exchange.