ant-design-vue動態(tài)表格合并案例
前言
最近接到一個需求，要把后端傳過來的數(shù)據(jù)動態(tài)展示在表格上面，并且支持前端篩選，相同數(shù)據(jù)進行單元格合并，
最終實現(xiàn)的效果如下：
數(shù)據(jù)格式
后端會返回給我們一個數(shù)組,數(shù)組的每一項格式是這樣,在這個需求里，我們需要對 title，department,bugType 這三個字段相同的值的單元格進行合并
{
fixCount: 0,
id: 0,
codeType: '新代碼',
bugType: 'ui展示問題',
notFixedCount: 0,
todayAdd: 0,
totalCount: 0,
title: 'bug總覽',
department: '開發(fā)一部'
},ant-desgin-vue表格提供的api
ant-desigin-vue的table組件提供一個自定義渲染單元格的方法customRender，接收兩個參數(shù),一個text當前值，row當前行，我們可以根據(jù)我們業(yè)務需求對它進行操作，然后把它return 出去就能得到想要的效果
表格支持行/列合并，使用 render 里的單元格屬性 colSpan 或者 rowSpan 設值為 0 時，設置的表格不會渲染。
所以先定義columns也就是表頭格式
columns: [
{
title: '',
dataIndex: 'title',
width: 120,
customRender: (text, row) => {
return {
children: `${text}`,
attrs: {
rowSpan: row.titleRowSpan
}
}
}
},
{
title: '部門',
dataIndex: 'department',
width: 120,
customRender: (text, row, index) => {
return {
children: `${text}`,
attrs: {
rowSpan: row.departmentRowSpan
}
}
}
},
{
title: '代碼類型',
dataIndex: 'codeType',
width: 120
},
{
title: '總數(shù)',
dataIndex: 'totalCount',
width: 120
},
{
title: '修復',
dataIndex: 'fixCount',
width: 120
},
{
title: '未修復',
dataIndex: 'notFixedCount',
width: 120
},
{
title: '今日新增',
dataIndex: 'todayAdd',
width: 120
},
{
title: 'Bug類型',
dataIndex: 'bugType',
width: 120,
customRender: (text, row, index) => {
return {
children: `${text}`,
attrs: {
rowSpan: row.bugTypeRowSpan
}
}
}
}
],合并單元格算法實現(xiàn)
說下思路：
其實就是類似于雙指針的思想：
- 需要兩次循環(huán)，第一次循環(huán)
i，作為合并單元格后的起始點， - 第二次循環(huán)
j是從起始點找下一個值是否是相同的值，如果相同則合并單元格,合并的數(shù)量就是count，然后把本次循環(huán)相同值的最后一個序號保存下來，第一次循環(huán)就從這個序號開始繼續(xù)跑
具體代碼實現(xiàn)如下：
// 合并單元格
combineRow(key) {
const tableData = this.tableData
for (var i = 0; i < tableData.length; i++) {
const item = tableData[i]
let count = 1
for (let j = i + 1; j < tableData.length; j++) {
// 如果是同一個值，往后遞增
if (item[key] === tableData[j][key]) {
count++
// 往后相同的值都設為空單元格
tableData[j][`${key}RowSpan`] = 0
// 只有同值第一個才設置合并的單元格數(shù)
item[`${key}RowSpan`] = count
// 所有都是為同一個值的情況
// 如果到了尾部，則循環(huán)結束
if (j === tableData.length - 1) {
return
}
} else {
// 指針跳轉到下一個，從下一排開始
i = j - 1
count = 1
tableData[j][`${key}RowSpan`] = 0
break
}
}
}
this.tableData = tableData
}然后我們在created中調(diào)用
created() {
this.combineRow('title') // 合并title
this.combineRow('department') // 合并部門
this.combineRow('bugType') // 合并bug類型
}至于過濾的效果，就不贅述了，很簡單，往鍵盤上撒把米雞都能給你敲出來，看下面代碼就知道
效果展示
其實這個需求麻煩在于數(shù)據(jù)轉換上，那會兒后端給的數(shù)據(jù)太難處理了，非得讓我搞個矩陣才能處理，相比之下合并單元格其實也還好，沒那么難實現(xiàn)。
到此這篇關于ant-design-vue動態(tài)表格合并案例的文章就介紹到這了,更多相關vue表格合并內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在?Vue?3?中,封裝自定義指令可以幫助你更好地復用一些常見的DOM操作邏輯,自定義指令可以用于處理一些特定的用戶交互行為,本文給大家介紹了Vue3封裝自定義指令的示例,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue地區(qū)選擇組件主要用于全國地區(qū)數(shù)據(jù)的操作，包括省，市，區(qū)三級聯(lián)動，地區(qū)數(shù)據(jù)的添加和刪除,本文重點給大家介紹vue地區(qū)選擇組件教程詳解，需要的朋友參考下吧2018-05-05
今天小編就為大家分享一篇vue transition 在子組件中失效的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本文通過實例代碼給大家介紹了vue和webpack項目構建過程常用的npm命令,需要的朋友可以參考下2018-06-06
el-form resetFields無效和validate無效的可能原因及解決方法
本文主要介紹了el-form resetFields無效和validate無效的可能原因及解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
vue中 router.beforeEach() 的用法示例代碼
導航守衛(wèi)主要是通過跳轉或取消的方式守衛(wèi)導航,本文通過示例代碼講解vue中 router.beforeEach() 的用法,感興趣的朋友跟隨小編一起看看吧2023-12-12
通過PPTXjs插件,實現(xiàn)PPTX文件在線預覽,需下載PPTXjs,將其引入HTML頁面,并編寫相應的HTML和JS代碼,如果是移動端還需調(diào)整div大小,這是一種便捷的前端PPTX轉HTML技術,適合網(wǎng)頁展示使用2024-09-09
Vue中使用better-scroll實現(xiàn)輪播圖組件
better-scroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件。這篇文章主要介紹了Vue中使用better-scroll實現(xiàn)輪播圖組件的實例代碼,需要的朋友可以參考下2020-03-03
crypto-js對稱加密解密的使用方式詳解(vue與java端)
這篇文章主要介紹了如何在Vue前端和Java后端使用crypto-js庫進行AES加密和解密,前端通過創(chuàng)建AES.js文件來實現(xiàn)加密解密功能,并在Vue文件或JavaScript中使用,后端則可以直接使用Java代碼進行AES加密和解密操作,需要的朋友可以參考下2025-01-01
vue中el-tree結合el-switch實現(xiàn)開關狀態(tài)切換
本文主要介紹了vue中el-tree結合el-switch實現(xiàn)開關狀態(tài)切換,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12