vue通過數(shù)據(jù)過濾實現(xiàn)表格合并
基于vue通過數(shù)據(jù)過濾實現(xiàn)表格合并，供大家參考，具體內(nèi)容如下
需求
- 基于vue渲染的數(shù)據(jù)表格
- 需要對相同的列進行合并
思路
自從使用了vue，就再也不想直接操作dom節(jié)點了，所以還是對數(shù)據(jù)操作。
要合并單元格需要用到rowspan屬性，所有想法是針對數(shù)據(jù)添加rowspan屬性使其多行顯示，但下面的行再去渲染就重復了，所以用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="" style="">月份</th>
<th class="" style="" >征期</th>
<th class="" style="" >繳款期</th>
<th class="" style="" >稅種</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}”
接著，設計一個算法，對用于渲染table渲染的數(shù)組，每個數(shù)據(jù)項添加兩個屬性，rowspan和hidden，計算出rowspan的值為 本列中該 值相同的行數(shù)，（當然，數(shù)據(jù)在sql中是經(jīng)過group by的）以及依據(jù)rowspan的值計算hidden的值是否顯示true/false，最后將此改變后的數(shù)組輸出。
然而 ，需求是復雜的。
如圖，要求第二列不能跨過第一列的維度合并，所以，沒有辦法一勞永逸，只能分別處理
先對月份處理，再對征期處理。
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;
},
然后。
這樣就搞定了。
效果圖： 這里前兩列進行了合并
就是這樣，by 一位即將成為 前端 的 后臺程序員
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
關于vue v-for 循環(huán)問題(一行顯示四個,每一行的最右邊那個計算屬性)
這篇文章主要介紹了關于vue v-for 循環(huán)問題(一行顯示四個,每一行的最右邊那個計算屬性),需要的朋友可以參考下2018-09-09
這篇文章主要介紹的是Vue 組件組織結構及組件注冊，為了能在模板中使用，這些組件必須先注冊以便 Vue 能夠識別。這里有兩種組件的注冊類型：全局注冊和局部注冊。至此，我們的組件都只是通過 Vue.component 全局注冊的，文章學詳細內(nèi)容,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了Vue3如何使用axios發(fā)起網(wǎng)絡請求，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
在本篇文章里小編給大家整理的是一篇關于Vue+ElementUI怎么處理超大表單實例講解內(nèi)容，以后需要的朋友可以跟著學習參考下。2021-11-11
這篇文章主要為大家詳細介紹了vue?Echarts實現(xiàn)儀表盤案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了如何解決Element UI中NavMenu折疊菜單的坑,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
本文主要以 vue-cli3 搭建的項目為例，來聊一下如何在項目中更優(yōu)雅的使用 svg 。感興趣的朋友跟隨小編一起看看吧2018-10-10
vue 關閉瀏覽器窗口的時候,清空localStorage的數(shù)據(jù)示例
今天小編就為大家分享一篇vue 關閉瀏覽器窗口的時候,清空localStorage的數(shù)據(jù)示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue2.0實現(xiàn)檢測無用的代碼并刪除方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了使用Vue做一個簡單的todo應用的三種方式的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10