vue+el-table實(shí)現(xiàn)合并單元格
更新時(shí)間：2021年09月29日 09:24:37 作者：linlinlinhtml_
這篇文章主要為大家詳細(xì)介紹了vue+el-table實(shí)現(xiàn)合并單元格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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)容的序號
//省
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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vuerouter的beforeEach與afterEach鉤子函數(shù)的區(qū)別
本文詳細(xì)的介紹了Vuerouter的beforeEach與afterEach鉤子函數(shù)的區(qū)別和使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue監(jiān)聽鍵盤事件的快捷方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
vue3.2?reactive函數(shù)問題小結(jié)
reactive用來包裝一個(gè)對象，使其每個(gè)對象屬性都具有響應(yīng)性（也就是深層次響應(yīng)式），這篇文章主要介紹了vue3.2?reactive函數(shù)注意點(diǎn)及問題小結(jié),需要的朋友可以參考下2022-12-12
Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說明
這篇文章主要介紹了Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue項(xiàng)目中onscroll的坑及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue制作一個(gè)toast組件npm包,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
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ū)別呢,下面小編就來和大家詳細(xì)講講,希望對大家有所幫助2023-10-10
在我們?nèi)粘ｉ_發(fā)中經(jīng)常因?yàn)樗季S定式，我們會犯一些奇怪的錯(cuò)誤，有時(shí)候看似簡單的問題卻給出了復(fù)雜的解決方案。下面這篇文章主要介紹了vue.js父組件使用外部對象的方法，這個(gè)看似簡單卻繞了一些彎路的問題，有必要和大家分享下，需要的朋友可以參考學(xué)習(xí)，下面來看看吧。2017-04-04
vue 輸入電話號碼自動按3-4-4分割功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 輸入電話號碼自動按3-4-4分割功能的實(shí)現(xiàn)代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了VUE程序調(diào)試的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06