vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格
html :
<el-table :header-cell-style="{background:'#6d7f93',color:'white'}" :data="ptableDate" align="center" border v-loading="loading" :height="tableHeight" :span-method="objectOneMethod" > <el-table-column align="center" show-overflow-tooltip prop="projName" ></el-table-column> <el-table-column align="center" show-overflow-tooltip prop="dirtySection" ></el-table-column> <el-table-column align="center" show-overflow-tooltip prop="towerNumber" ></el-table-column> <el-table-column align="center" show-overflow-tooltip prop="inclination" ></el-table-column> </el-table>
method
objectOneMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { const _row = this.setTable(this.ptableDate).one[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col }; } if (columnIndex === 1 ) { const _row = this.setTable(this.ptableDate).two[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col }; } }, setTable(tableData) { let spanOneArr = [], spanTwoArr = [], concatOne = 0, concatTwo = 0; tableData.forEach((item, index) => { if (index === 0) { spanOneArr.push(1); spanTwoArr.push(1); } else { if (item.projName === tableData[index - 1].projName) { //第一列需合并相同內(nèi)容的判斷條件 spanOneArr[concatOne] += 1; spanOneArr.push(0); } else { spanOneArr.push(1); concatOne = index; } if (item.dirtySection === tableData[index - 1].dirtySection) { //第二列和需合并相同內(nèi)容的判斷條件 spanTwoArr[concatTwo] += 1; spanTwoArr.push(0); } else { spanTwoArr.push(1); concatTwo = index; } } }); return { one: spanOneArr, two: spanTwoArr }; },
ps:下面看下ELEMENT-UI 合并單元格的方法
arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 只合并區(qū)域位置 //columnIndex 橫的第一列 //rowIndex 豎的數(shù)組的length % 3 ==0 合并單元格 if (columnIndex === 0) { //如果是第一行 if (rowIndex % 3 === 0) {//如果是 數(shù)組長(zhǎng)度 % 3 ==0 return { rowspan: 3, colspan: 1 }; } else { return { rowspan: 0, colspan: 0 }; } } },
總結(jié)
到此這篇關(guān)于vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格的文章就介紹到這了,更多相關(guān)Element-UI中單元格合并內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
前端配合后端實(shí)現(xiàn)Vue路由權(quán)限的方法實(shí)例
一開始我還以為vue的路由只能用在工程化的項(xiàng)目里面,其實(shí)不然,下面這篇文章主要給大家介紹了關(guān)于前端配合后端實(shí)現(xiàn)Vue路由權(quán)限的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化
這篇文章主要為大家詳細(xì)介紹了Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03Vue動(dòng)態(tài)組件component標(biāo)簽的用法大全
這篇文章主要介紹了Vue動(dòng)態(tài)組件component標(biāo)簽的用法,在Vue中,可以通過component標(biāo)簽的is屬性動(dòng)態(tài)指定標(biāo)簽,本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08Vue3子組件實(shí)現(xiàn)v-model用法的示例代碼
在Vue 3中,實(shí)現(xiàn)自定義的input組件并支持v-model綁定,涉及到對(duì)modelValue這個(gè)默認(rèn)prop的處理和對(duì)應(yīng)的update:modelValue事件的觸發(fā),本文給大家介紹了Vue3子組件實(shí)現(xiàn)v-model用法的示例,需要的朋友可以參考下2024-04-04ElementUI實(shí)現(xiàn)el-table行列合并的操作步驟
在前端開發(fā)中,數(shù)據(jù)展示一直是一個(gè)重要的部分,而表格則是數(shù)據(jù)展示最常見的形式之一,ElementUI 是餓了么前端團(tuán)隊(duì)推出的一款基于 Vue 的 UI 組件庫,其中的 el-table 組件是一個(gè)功能強(qiáng)大且靈活的表格組件,今天我們要詳細(xì)探討的是 el-table 的行列合并操作2024-08-08vue?動(dòng)態(tài)路由component?傳遞變量報(bào)錯(cuò)問題解決
這篇文章主要為大家介紹了vue?動(dòng)態(tài)路由component?傳遞變量報(bào)錯(cuò)問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05vue cli3.0結(jié)合echarts3.0與地圖的使用方法示例
這篇文章主要給大家介紹了關(guān)于vue cli3.0結(jié)合echarts3.0與地圖的使用方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03