Element-UI中el-table如何合并相同單元格
問題背景
項(xiàng)目需求table表格中,相同的類型合并成一個(gè)單元格展示。
問題描述
el-table
并沒有相關(guān)的語法直接合并,需要我們自己傳入一個(gè)方法返回一個(gè)數(shù)組格式,來確定要合并行列。
解決問題
首先需要在 el-table
標(biāo)簽上綁定:span-method="objectSpanMethod"
<el-table :data="tableData" :span-method="objectSpanMethod" > <el-table-column prop="projectName" label="訂單類型" /> </el-table>
再去methods
中定義 objectSpanMethod
方法,data
中定義一個(gè)rowSpanArr
參數(shù)
// 獲取相同名稱的個(gè)數(shù) tableData: 表格的數(shù)據(jù), projectName: 確定相同的參數(shù) handleTableData(tableData){ let rowSpanArr = [], position = 0; for (let [index, item] of tableData.entries()) { if (index == 0) { rowSpanArr.push(1); position = 0; } else { if (item.projectName == tableData[index - 1].projectName) { rowSpanArr[position] += 1; //項(xiàng)目名稱相同,合并到同一個(gè)數(shù)組中 rowSpanArr.push(0); } else { rowSpanArr.push(1); position = index; } } } this.rowSpanArr = rowSpanArr } // 單元格的處理方法 當(dāng)前行row、當(dāng)前列column、當(dāng)前行號(hào)rowIndex、當(dāng)前列號(hào)columnIndex objectSpanMethod({ row, column, rowIndex, columnIndex }){ if (columnIndex === 0) { const rowSpan = this.rowSpanArr[rowIndex]; return { rowspan: rowSpan, //行 colspan: 1 //列 }; } }
擴(kuò)展
objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { // 判斷是不是第一列,只有第一列才執(zhí)行合并 if (rowIndex % 2 === 0) { // 判斷能不能被2整除 return { rowspan: 2, // 從當(dāng)前單元格開始,執(zhí)行合并2行 colspan: 1, // 從當(dāng)前單元格開始,執(zhí)行合并1列 }; } else { return { // 第一列的其他元素不執(zhí)行合并 rowspan: 0, // 為0,不執(zhí)行合并 colspan: 0 // 為0,不執(zhí)行合并 }; } } }
總結(jié)
到此這篇關(guān)于Element-UI中el-table如何合并相同單元格的文章就介紹到這了,更多相關(guān)el-table合并相同單元格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Electron主進(jìn)程(Main?Process)與渲染進(jìn)程(Renderer?Process)通信詳解
這篇文章主要介紹了Electron主進(jìn)程(Main?Process)與渲染進(jìn)程(Renderer?Process)通信,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue中使用swiper,左右箭頭點(diǎn)擊沒有效果問題及解決
這篇文章主要介紹了vue中使用swiper,左右箭頭點(diǎn)擊沒有效果問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05Vue 頁面狀態(tài)保持頁面間數(shù)據(jù)傳輸?shù)囊环N方法(推薦)
vue router給我們提供了兩種頁面間傳遞參數(shù)的方式,一種是動(dòng)態(tài)路由匹配,一種是編程式導(dǎo)航,接下來通過本文給大家介紹Vue 頁面狀態(tài)保持頁面間數(shù)據(jù)傳輸?shù)囊环N方法,需要的朋友可以參考下2018-11-11ElementPlus?Table表格實(shí)現(xiàn)可編輯單元格
本文主要介紹了ElementPlus?Table表格實(shí)現(xiàn)可編輯單元格,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格的示例
本篇主要介紹了Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式
這篇文章主要介紹了vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04