vue+el-table實現(xiàn)合并單元格
更新時間:2021年09月29日 09:24:37 作者:linlinlinhtml_
這篇文章主要為大家詳細介紹了vue+el-table實現(xiàn)合并單元格,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了el-table實現(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則它這個列需要取消
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 {
// 判斷當前元素與上一個元素是否相同 this.provincePos是provinceArr內(nèi)容的序號
//省
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é)果展示:

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

