快捷導(dǎo)航

vue實(shí)現(xiàn)表格合并功能

更新時(shí)間：2020年12月01日 08:40:05 作者：CurryChou777

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格合并功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)表格合并功能的具體代碼，供大家參考，具體內(nèi)容如下

1、背景

本身有vue進(jìn)行渲染的數(shù)據(jù)表格，，但是出于整體考慮，需要對(duì)相同的列信息進(jìn)行單元格合并。

由于使用的是vue，想到MVVM是要用數(shù)據(jù)驅(qū)動(dòng)的思想，所以考慮在Model做手腳，而不是渲染出數(shù)據(jù)來(lái)后做DOM操作，當(dāng)然基本的CSS還是要有的。因此這個(gè)方法對(duì)所有
數(shù)據(jù)驅(qū)動(dòng)的框架都有效，比如說(shuō)Angular和React。最后的實(shí)現(xiàn)效果是這樣的：

2、思路

原本的正常表格是這樣的：

<table >
      <thead>
        <tr>
          <th>設(shè)備</th>
          <th>工單</th>
          <th>產(chǎn)品型號(hào)</th>
          <th>計(jì)劃/實(shí)際</th>
          <th>狀態(tài)</th>
          <th>預(yù)計(jì)生產(chǎn)數(shù)</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in testData">
          <td>{{ item.equipmentName }}</td>
          <td>{{ item.doCode}}</td>
          <td>{{ item.materialCode}}</td>
          <td>{{ item.productionNum}}</td>
          <td>{{ item.status}}</td>
          <td>{{ item.pNum}}</td>
        </tr>
      </tbody>
</table>

先拿正常的表格來(lái)做測(cè)試，原生的<td>標(biāo)簽就有rowspan屬性支持單元格行合并，屬性值指的是向下合并多少行，其實(shí)就相當(dāng)于在本行中向下又添加了幾個(gè)單元格。

因?yàn)椋绻酉聛?lái)的一行還會(huì)渲染的話就會(huì)被擠下去，因此，下面被合并的單元格要隱藏掉，通過(guò)display: none;css控制即可。

因此，每個(gè)<td>標(biāo)簽需要帶有兩個(gè)屬性值，rowspan和display來(lái)控制每一個(gè)單元格的合并行數(shù)和是否顯示。代碼變成這樣了

<table >
      <thead>
        <tr>
          <th>設(shè)備</th>
          <th>工單</th>
          <th>產(chǎn)品型號(hào)</th>
          <th>計(jì)劃/實(shí)際</th>
          <th>狀態(tài)</th>
          <th>預(yù)計(jì)生產(chǎn)數(shù)</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in testData">
          <td :rowspan="item.equipmentNamespan" :class="{hidden: item.equipmentNamedis}">{{ item.equipmentName }}</td>
          <td :rowspan="item.doCodespan" :class="{hidden: item.doCodedis}">{{ item.doCode}}</td>
          <td :rowspan="item.materialCodespan" :class="{hidden: item.materialCodedis}">{{ item.materialCode}}</td>
          <td :rowspan="item.productionNumspan" :class="{hidden: item.productionNumdis}">{{ item.productionNum}}</td>
          <td :rowspan="item.statusspan" :class="{hidden: item.statusdis}">{{ item.status}}</td>
          <td :rowspan="item.pNumspan" :class="{hidden: item.pNumdis}">{{ item.pNum}}</td>
        </tr>
      </tbody>
</table>

其中，這兩個(gè)屬性有一些特征：

要顯示的單元格rowspan為>1的值，記錄接下來(lái)的行數(shù)
要顯示的單元格display為true
接下來(lái)不顯示的單元格rowspan為1且display為false
只有一行數(shù)據(jù)的單元格rowspan為1且display為true
實(shí)際上就是設(shè)計(jì)一個(gè)算法，對(duì)于輸入的表格數(shù)組，每個(gè)數(shù)據(jù)項(xiàng)添加兩個(gè)屬性，rowspan和display，并且計(jì)算出**rowspan的值為
本列中以下相同值的行數(shù)，以及依據(jù)rowspan的值計(jì)算display的值是否顯示**，最后將此改變后的數(shù)組輸出。

3、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;
}

4 寫在最后

代碼實(shí)際上很短很簡(jiǎn)單，主要借助的是kmp的思想，定義一個(gè)指針k，開(kāi)始指向第一個(gè)值，然后向下比較，以此對(duì)rowspan和display設(shè)置，若遇到不相同的值則判斷為跳出，進(jìn)行下一個(gè)循環(huán)，通知指針k加上這個(gè)過(guò)程中運(yùn)算的行數(shù)，進(jìn)行跳轉(zhuǎn)，然后比較下一個(gè)單元格的值，和kmp的指針跳轉(zhuǎn)判斷相同字符串一樣的原理。

通過(guò)combineCell()這個(gè)函數(shù)就可以將網(wǎng)絡(luò)請(qǐng)求回來(lái)的數(shù)據(jù)進(jìn)行過(guò)濾，附加上相應(yīng)的值后再對(duì)vue監(jiān)視的數(shù)組進(jìn)行賦值操作就可以了。

實(shí)際上此方法不僅適用于vue，數(shù)據(jù)驅(qū)動(dòng)的框架都可以，包括Angular和React，要想實(shí)現(xiàn)表格合并，對(duì)請(qǐng)求回來(lái)的值過(guò)濾一下就OK。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: