vue+el-table實(shí)現(xiàn)合并單元格
本文實(shí)例為大家分享了el-table實(shí)現(xiàn)合并單元格的具體代碼,供大家參考,具體內(nèi)容如下
el-table合并單元格(vue+element)
- 先在el-table放入:span-method="arraySpanMethod"
<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}" :data="merchantList" border :span-method="arraySpanMethod">
<el-table-column align="center" prop="provinceName" label="省份"> </el-table-column>
<el-table-column align="center" label="代理商名稱">
<template scope="scope">
<span>{{scope.row.parentMerchantName == scope.row.merchantName ? '---' : scope.row.parentMerchantName}}</span>
</template>
</el-table-column>
<el-table-column align="center" prop="cityName" label="市"> </el-table-column>
<el-table-column align="center" prop="countryName" label="區(qū)"> </el-table-column>
<el-table-column align="center" prop="merchantName" label="門店"> </el-table-column>
</el-table>
在methods中寫入方法:
//合并單元格
arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {//第一列的合并方法,省
const _row_1 = this.provinceArr[rowIndex];
const _col_1 = _row_1 > 0 ? 1 : 0; //如果被合并了_row=0則它這個(gè)列需要取消
return {
rowspan: _row_1,
colspan: _col_1
}
}
},
//初始化
merageInit () {
this.provinceArr = []
this.provincePos = 0
},
//要合并的數(shù)組的方法
merage () {
this.merageInit()
for (var i = 0; i < this.merchantList.length; i++) {
if (i === 0) {
//第一行必須存在
this.provinceArr.push(1)
this.provincePos = 0
} else {
// 判斷當(dāng)前元素與上一個(gè)元素是否相同 this.provincePos是provinceArr內(nèi)容的序號(hào)
//省
if (this.merchantList[i].provinceName === this.merchantList[i - 1].provinceName) {
this.provinceArr[this.provincePos] += 1
this.provinceArr.push(0)
} else {
this.provinceArr.push(1)
this.provincePos = i
}
}
}
},
結(jié)果展示:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vuerouter的beforeEach與afterEach鉤子函數(shù)的區(qū)別
本文詳細(xì)的介紹了Vuerouter的beforeEach與afterEach鉤子函數(shù)的區(qū)別和使用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
vue監(jiān)聽(tīng)鍵盤事件的快捷方法【推薦】
這篇文章主要介紹了vue監(jiān)聽(tīng)鍵盤事件的快捷方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
vue3.2?reactive函數(shù)問(wèn)題小結(jié)
reactive用來(lái)包裝一個(gè)對(duì)象,使其每個(gè)對(duì)象屬性都具有響應(yīng)性(也就是深層次響應(yīng)式),這篇文章主要介紹了vue3.2?reactive函數(shù)注意點(diǎn)及問(wèn)題小結(jié),需要的朋友可以參考下2022-12-12
Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說(shuō)明
這篇文章主要介紹了Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
vue3中reactive和ref的實(shí)現(xiàn)與區(qū)別詳解
reactive和ref都是vue3實(shí)現(xiàn)響應(yīng)式系統(tǒng)的api,他們是如何實(shí)現(xiàn)響應(yīng)式的呢,reactive和ref又有什么區(qū)別呢,下面小編就來(lái)和大家詳細(xì)講講,希望對(duì)大家有所幫助2023-10-10
vue 輸入電話號(hào)碼自動(dòng)按3-4-4分割功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 輸入電話號(hào)碼自動(dòng)按3-4-4分割功能的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04

