欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

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

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

需求

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

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

 vue通過數(shù)據(jù)過濾實現(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ù)過濾實現(xiàn)表格合并

這樣就搞定了。

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

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

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

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

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

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

廣告

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

搜索引擎優(yōu)化