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è)務(wù)需求對它進行操作,然后把它return 出去就能得到想要的效果
表格支持行/列合并,使用 render 里的單元格屬性 colSpan 或者 rowSpan 設(shè)值為 0 時,設(shè)置的表格不會渲染。
所以先定義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: '修復(fù)', dataIndex: 'fixCount', width: 120 }, { title: '未修復(fù)', 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++ // 往后相同的值都設(shè)為空單元格 tableData[j][`${key}RowSpan`] = 0 // 只有同值第一個才設(shè)置合并的單元格數(shù) item[`${key}RowSpan`] = count // 所有都是為同一個值的情況 // 如果到了尾部,則循環(huán)結(jié)束 if (j === tableData.length - 1) { return } } else { // 指針跳轉(zhuǎn)到下一個,從下一排開始 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ù)轉(zhuǎn)換上,那會兒后端給的數(shù)據(jù)太難處理了,非得讓我搞個矩陣才能處理,相比之下合并單元格其實也還好,沒那么難實現(xiàn)。
到此這篇關(guān)于ant-design-vue動態(tài)表格合并案例的文章就介紹到這了,更多相關(guān)vue表格合并內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue點擊彈窗自動觸發(fā)點擊事件的解決辦法(模擬場景)
本文通過案例場景給大家介紹vue點擊彈窗自動觸發(fā)點擊事件的解決辦法,通過兩種方法給大家分享vue 自動觸發(fā)點擊事件的處理方法,對vue自動觸發(fā)點擊事件相關(guān)知識感興趣的朋友一起看看吧2021-05-05vue用vis插件如何實現(xiàn)網(wǎng)絡(luò)拓撲圖
這篇文章主要介紹了vue用vis插件如何實現(xiàn)網(wǎng)絡(luò)拓撲圖,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10Vue動態(tài)生成el-checkbox點擊無法賦值的解決方法
這篇文章主要給大家介紹了關(guān)于Vue動態(tài)生成el-checkbox點擊無法賦值的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02