vue單元格多列合并的實現(xiàn)
一.多列合并
1.在el-table中添加:span-method="objectSpanMethod"屬性來控制合并單元格,如下圖

2.合并代碼,每一列都要設置一個不同的key,這樣可以防止合并的時候上下內(nèi)容一樣導致錯誤的問題
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (this.myObj[row.channel_type].start === rowIndex) {
return {
rowspan: this.myObj[row.channel_type].step,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
if (columnIndex === 1) {
if (
this.myObj_two[row.channel_name_chinese + row.channel_type].start ===
rowIndex
) {
return {
rowspan: this.myObj_two[row.channel_name_chinese + row.channel_type]
.step,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},
// 合并單元格第一列
resolveData(arr) {
var obj = {};
arr.forEach((val, key) => {
if (!obj[val.channel_type]) {
obj[val.channel_type] = {
start: key,
step: 1
};
} else {
obj[val.channel_type].step++;
}
});
this.myObj = obj;
console.log(obj);
},
// 合并單元格第二列
resolveData_two(arr) {
var obj = {};
arr.forEach((val, key) => {
if (!obj[val.channel_name_chinese + val.channel_type]) {
obj[val.channel_name_chinese + val.channel_type] = {
start: key,
step: 1
};
} else {
obj[val.channel_name_chinese + val.channel_type].step++;
}
});
this.myObj_two = obj;
console.log(this.myObj_two, "this.myObj");
},
3.需要調(diào)用一下下面兩個函數(shù),data為你所獲取的所有數(shù)據(jù)
this.resolveData_two(data);
this.resolveData(data);
4.合并結果如下圖

到此這篇關于vue單元格多列合并的實現(xiàn)的文章就介紹到這了,更多相關vue單元格多列合并內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解
這篇文章主要介紹了vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03
vue?elementui動態(tài)添加el-input實例代碼
最近遇到一個新的需求,需要動態(tài)添加el-input,這篇文章主要給大家介紹了關于vue?elementui動態(tài)添加el-input的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
vue.js中window.onresize的超詳細使用方法
這篇文章主要給大家介紹了關于vue.js中window.onresize的超詳細使用方法,window.onresize 是直接給window的onresize屬性綁定事件,只能有一個,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12

