Sample Code for table merge and sample code for vue. js

Sample Code for table merge and sample code for vue. js

Preface

Because vue is used and MVVM uses the data-driven idea, we should consider using the Model instead of rendering the data for DOM operations. Of course, the basic CSS is still required. Therefore, this method is effective for all data-driven frameworks, such as Angular and React.

The final implementation result is as follows:

Implementation

The code of the original normal table is as follows:

<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, use a normal table for testing. Native<td>Labels are available.rowspanThe attribute supports row merging of cells. The attribute value refers to the number of rows merged down. In fact, it is equivalent to adding several cells down the row.

Because, if the next row is rendered, it will be squeezed down. Therefore, the merged cells below should be hidden.display: none;Css control.

Therefore, each<td>The tag must have two attribute values,rowspanAnddisplayTo control the number of merged rows and whether to display each cell.

Code becomes like this

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

These two attributes have some features:

Cell to be displayedrowspanIt is a value greater than 1 and records the next number of rows.

Cell to be displayeddisplayIstrue

Cells not displayed nextrowspan1 anddisplayIsfalse

Only cells with one row of datarowspan1 anddisplayIstrue

An algorithm is designed to add two attributes for each data item in the input table array,rowspanAnddisplayAnd calculaterowspanIs

The number of rows with the same value below in this column, and the basisrowspanValue CalculationdisplayWhether the value is displayed, and finally the array output after this change.

Solution 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;}

Summary

The code is actually very short and simple. It mainly uses the kmp idea to define a pointer k, start to point to the first value, and then compare it downrowspanAnddisplaySettings,

If different values are encountered, the system jumps out and performs the next loop. It notifies the pointer k to add the number of rows computed in the process to jump to the next cell, and then compares the values of the next cellkmpTo determine the principle of the same string.

PasscombineCell()This function filters the data returned from the network request, attaches the corresponding value, and then assigns a value to the array monitored by vue.

In fact, this method is applicable not only to vue, but also to data-driven frameworks, including Angular and React. to merge tables, you can filter the value returned by the request.

The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.