vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格
html :
<el-table
:header-cell-style="{background:'#6d7f93',color:'white'}"
:data="ptableDate"
align="center"
border
v-loading="loading"
:height="tableHeight"
:span-method="objectOneMethod"
>
<el-table-column align="center" show-overflow-tooltip prop="projName" ></el-table-column>
<el-table-column align="center" show-overflow-tooltip prop="dirtySection" ></el-table-column>
<el-table-column align="center" show-overflow-tooltip prop="towerNumber" ></el-table-column>
<el-table-column align="center" show-overflow-tooltip prop="inclination" ></el-table-column>
</el-table>method
objectOneMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.setTable(this.ptableDate).one[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
if (columnIndex === 1 ) {
const _row = this.setTable(this.ptableDate).two[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
setTable(tableData) {
let spanOneArr = [],
spanTwoArr = [],
concatOne = 0,
concatTwo = 0;
tableData.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1);
spanTwoArr.push(1);
} else {
if (item.projName === tableData[index - 1].projName) {
//第一列需合并相同內(nèi)容的判斷條件
spanOneArr[concatOne] += 1;
spanOneArr.push(0);
} else {
spanOneArr.push(1);
concatOne = index;
}
if (item.dirtySection === tableData[index - 1].dirtySection) {
//第二列和需合并相同內(nèi)容的判斷條件
spanTwoArr[concatTwo] += 1;
spanTwoArr.push(0);
} else {
spanTwoArr.push(1);
concatTwo = index;
}
}
});
return {
one: spanOneArr,
two: spanTwoArr
};
},ps:下面看下ELEMENT-UI 合并單元格的方法
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// 只合并區(qū)域位置
//columnIndex 橫的第一列
//rowIndex 豎的數(shù)組的length % 3 ==0 合并單元格
if (columnIndex === 0) { //如果是第一行
if (rowIndex % 3 === 0) {//如果是 數(shù)組長度 % 3 ==0
return {
rowspan: 3,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},
總結(jié)
到此這篇關(guān)于vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格的文章就介紹到這了,更多相關(guān)Element-UI中單元格合并內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于better-scroll 實(shí)現(xiàn)歌詞聯(lián)動功能的代碼
BetterScroll 是一款重點(diǎn)解決移動端(已支持 PC)各種滾動場景需求的插件,BetterScroll 是使用純 JavaScript 實(shí)現(xiàn)的,這意味著它是無依賴的。本文基于better-scroll 實(shí)現(xiàn)歌詞聯(lián)動功能,感興趣的朋友跟隨小編一起看看吧2020-05-05
vue中使用loadsh的debounce防抖函數(shù)問題
這篇文章主要介紹了vue中使用loadsh的debounce防抖函數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue3中使用mock.js模擬數(shù)據(jù)的示例詳解
前后端同時開發(fā)的時候,后端接口數(shù)據(jù)沒有出來,前端可以使用mock模擬假數(shù)據(jù),所以下面小編就來為大家詳細(xì)介紹一下如何在Vue3中使用mock.js模擬數(shù)據(jù)吧2025-03-03
Vue中使用jsencrypt進(jìn)行RSA非對稱加密的操作方法
這篇文章主要介紹了Vue中使用jsencrypt進(jìn)行RSA非對稱加密,在這里需要注意要加密的數(shù)據(jù)必須是字符串,對Vue?RSA非對稱加密相關(guān)知識感興趣的朋友一起看看吧2022-04-04
記一次Vue.js混入mixin的使用(分權(quán)限管理頁面)
這篇文章主要介紹了記一次Vue.js混入mixin的使用(分權(quán)限管理頁面),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
vue實(shí)現(xiàn)前臺列表數(shù)據(jù)過濾搜索、分頁效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)前臺列表數(shù)據(jù)過濾搜索、分頁效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-05-05

