Vue Elenent實(shí)現(xiàn)表格相同數(shù)據(jù)列合并
更新時(shí)間：2020年11月30日 15:17:26 作者：Qiu_MT
這篇文章主要為大家詳細(xì)介紹了Vue Elenent實(shí)現(xiàn)表格相同數(shù)據(jù)列合并，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue Elenent實(shí)現(xiàn)表格相同數(shù)據(jù)列合并的具體代碼，供大家參考，具體內(nèi)容如下
作者：秋名
思路：后臺(tái)查詢表格數(shù)據(jù)，查詢出來后直接傳到前端，前端通過foreach循環(huán)，然后對相同的表格進(jìn)行合并。（同一個(gè)表格，但是每一行，固定一列的數(shù)據(jù)都相同，即可使用合并單元格，做到了既美觀，也清晰。）
template：
<el-table :span-method="objectSpanMethod4" //在el-table里面添加合并單元格屬性 >
Js:
data(){
return{
orderdata:null,// 后端將數(shù)據(jù)查詢出來后，綁定到orderdata里面
}
},
methods: {
flitterData4(){
let spanOneArr = []
let concatOne = 0
//let spanOneArr1 = []
//let concatOne1 = 0
this.orderdata.forEach((item,index)=>{//循環(huán)后端查詢出來的數(shù)據(jù)(orderdata)
if(index === 0){
spanOneArr.push(1)
}else{
//name 修改
if(item.ENTERNAME === this.orderdata[index - 1].ENTERNAME){ //第一列需合并相同內(nèi)容的字段
spanOneArr[concatOne] += 1
spanOneArr.push(0)
}else{
spanOneArr.push(1)
concatOne = index
}
//if(item.coachName === this.coachdata[index - 1].coachName){ //第二列需合并相同內(nèi)容的判斷條件
//spanOneArr1[concatOne1] += 1
//spanOneArr1.push(0)
//}else{
//spanOneArr1.push(1)
//concatOne1 = index
// }
}
})
return {
one: spanOneArr,
//two:spanOneArr1
}
},
objectSpanMethod4({row, column, rowIndex, columnIndex}){
if(columnIndex === 0 ) {
// this.tableData 修改
const _row = (this.flitterData4(this.tableData).one)[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
//判斷是否是第二列，如果是就將第二列相同字段進(jìn)行合并
//if(columnIndex === 1) {
// const _row = (this.flitterData(this.tableData).two)[rowIndex]
// const _col = _row > 0 ? 1 : 0
// return {
// rowspan: _row,
// colspan: _col
// }
}
},
}
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
如何在Vue3項(xiàng)目中操作MySQL數(shù)據(jù)庫
在Vue3項(xiàng)目中使用axios發(fā)送HTTP請求與后端MySQL數(shù)據(jù)庫交互的步驟：1. 安裝MySQL數(shù)據(jù)庫并創(chuàng)建數(shù)據(jù)庫表；2. 后端服務(wù)器使用Node.js的mysql模塊實(shí)現(xiàn)MySQL數(shù)據(jù)庫操作接口；3. Vue3項(xiàng)目中使用axios調(diào)用這些接口進(jìn)行數(shù)據(jù)交互2024-11-11
vue如何在for循環(huán)中設(shè)置ref并獲取$refs
眾所周知在寫循環(huán)的時(shí)候給循環(huán)中的數(shù)據(jù)定義ref以便再下面直接通過this.$ref.來訪問,下面這篇文章主要給大家介紹了關(guān)于vue如何在for循環(huán)中設(shè)置ref并獲取$refs的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue使用socket與服務(wù)端進(jìn)行通信的代碼詳解
這篇文章主要給大家介紹了vue如何使用socket與服務(wù)端進(jìn)行通信的相關(guān)資料,在Vue中我們可以將Websocket類封裝成一個(gè)Vue插件,以便全局使用,需要的朋友可以參考下2023-09-09
vue中每個(gè)組件都是隔離的,包括父組件和子組件,各組件之間需要數(shù)據(jù)通信,就涉及到了組件傳值,本文給大家介紹vue中組件間多種傳值方式案例,感興趣的朋友跟隨小編一起看看吧2024-03-03
Element InputNumber 計(jì)數(shù)器的實(shí)現(xiàn)示例
這篇文章主要介紹了Element InputNumber 計(jì)數(shù)器的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
vue基于mint-ui的城市選擇3級聯(lián)動(dòng)的示例
本篇文章主要介紹了vue基于mint-ui的城市選擇3級聯(lián)動(dòng)的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
el-popover如何通過js手動(dòng)控制彈出框顯示、隱藏
最近項(xiàng)目中多次用到了Popover彈出框,下面這篇文章主要給大家介紹了關(guān)于el-popover如何通過js手動(dòng)控制彈出框顯示、隱藏的相關(guān)資料,需要的朋友可以參考下2023-12-12
Vue.js結(jié)合bootstrap實(shí)現(xiàn)分頁控件
這篇文章主要為大家詳細(xì)介紹了Vue.js 合bootstrap實(shí)現(xiàn)分頁控件的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
創(chuàng)建項(xiàng)目及包管理yarn create vite源碼學(xué)習(xí)
這篇文章主要為大家介紹了創(chuàng)建項(xiàng)目及包管理yarn create vite源碼學(xué)習(xí)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue根據(jù)權(quán)限動(dòng)態(tài)渲染按鈕、組件等的函數(shù)式組件實(shí)現(xiàn)
這篇文章主要介紹了vue根據(jù)權(quán)限動(dòng)態(tài)渲染按鈕、組件等的函數(shù)式組件實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望杜大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11