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

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

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供濟(jì)陽(yáng)網(wǎng)站建設(shè)、濟(jì)陽(yáng)做網(wǎng)站、濟(jì)陽(yáng)網(wǎng)站設(shè)計(jì)、濟(jì)陽(yáng)網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、濟(jì)陽(yáng)企業(yè)網(wǎng)站模板建站服務(wù)，十載濟(jì)陽(yáng)做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

需求

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

思路

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

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

所以，針對(duì)每一行數(shù)據(jù) ，用rowspan和display來(lái)控制每一個(gè)單元格的合并行數(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>

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

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

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

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

先對(duì)月份處理，再對(duì)征期處理。

talk is cheap ，show you the code。

號(hào)稱是算法，就倆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;
},

名字是拼音沒(méi)毛病，我也不想，人家大公司的規(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;
},

然后。

這樣就搞定了。

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

名稱欄目：vue通過(guò)數(shù)據(jù)過(guò)濾實(shí)現(xiàn)表格合并
網(wǎng)站地址：http://bm7419.com/article48/gosehp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、域名注冊(cè)、網(wǎng)站內(nèi)鏈、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)