vue通過數(shù)據(jù)過濾實(shí)現(xiàn)表格合并

發(fā)布時間：2020-10-11 09:10:27 來源：腳本之家閱讀：115 作者：天邊龍一條欄目：web開發(fā)

基于vue通過數(shù)據(jù)過濾實(shí)現(xiàn)表格合并，供大家參考，具體內(nèi)容如下

需求

基于vue渲染的數(shù)據(jù)表格
需要對相同的列進(jìn)行合并

思路

自從使用了vue，就再也不想直接操作dom節(jié)點(diǎn)了，所以還是對數(shù)據(jù)操作。

要合并單元格需要用到rowspan屬性，所有想法是針對數(shù)據(jù)添加rowspan屬性使其多行顯示，但下面的行再去渲染就重復(fù)了，所以用hidden 隱藏掉。

所以，針對每一行數(shù)據(jù) ，用rowspan和display來控制每一個單元格的合并行數(shù)和是否顯示

代碼

<table id="search_table" class="table table-bordered table-striped" cellspacing="0" width="100%">
 <thead>
 <tr class="table_bg">
 <th class="" colspan="12">征期日歷信息</th>
 </tr>
 <tr class="cell_bg">
 <th class="" >月份</th>
 <th class=""  >征期</th>
 <th class=""  >繳款期</th>
 <th class=""  >稅種</th>
 </tr>
 </thead>
 <tbody id="tbody">

 <tr class="" v-for="(i,index) in result">
 <td :rowspan="i.ydspan" :class="{hidden: i.yddis}" class="text-center">
  {{i.yd}}
 </td>
 <td :rowspan="i.zqspan" :class="{hidden: i.zqdis}">
 {{i.zq}}
 </td>
 <td <%--:rowspan="i.jkqspan" :class="{hidden: i.jkqdis}"--%>>
 {{i.jkq}}
 </td>
 <td>
 {{i.sz}}
 </td>
 </tr>
 </tbody>
</table>

這里，對需要合并的單元格添加 :rowspan=”i.ydspan” :class=”{hidden: i.yddis}”

接著，設(shè)計(jì)一個算法，對用于渲染table渲染的數(shù)組，每個數(shù)據(jù)項(xiàng)添加兩個屬性，rowspan和hidden，計(jì)算出rowspan的值為本列中該值相同的行數(shù)，（當(dāng)然，數(shù)據(jù)在sql中是經(jīng)過group by的）以及依據(jù)rowspan的值計(jì)算hidden的值是否顯示true/false，最后將此改變后的數(shù)組輸出。

然而，需求是復(fù)雜的。

vue通過數(shù)據(jù)過濾實(shí)現(xiàn)表格合并

如圖，要求第二列不能跨過第一列的維度合并，所以，沒有辦法一勞永逸，只能分別處理

先對月份處理，再對征期處理。

talk is cheap ，show you the code。

號稱是算法，就倆for 循環(huán)

combineZQ:function (list) {
 var k = 0;
 let field ="zq";
 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]['yd']==list[i]['yd']&&list[k]['yd']!='') {
  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;
},

名字是拼音沒毛病，我也不想，人家大公司的規(guī)范（-，-）

combineYd:function (list) {
 var k = 0;
 let field ="yd";
 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;
},

然后。

vue通過數(shù)據(jù)過濾實(shí)現(xiàn)表格合并

這樣就搞定了。

效果圖：這里前兩列進(jìn)行了合并

vue通過數(shù)據(jù)過濾實(shí)現(xiàn)表格合并

就是這樣，by 一位即將成為前端的后臺程序員

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

vue通過數(shù)據(jù)過濾實(shí)現(xiàn)表格合并

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽