el-table 行合并的實現(xiàn)示例
更新時間：2022年08月18日 10:29:03 作者：愛游戲愛動漫的肥宅
本文主要介紹了el-table 行合并的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
頁面實現(xiàn)行合并的情況還是比較常見的，但實現(xiàn)起來卻有一點點難。官網(wǎng)的例子有，不過人家的合并邏輯是從第一行開始兩行兩行合并，不能根據(jù)數(shù)據(jù)動態(tài)合并，感覺參考意義不太大。實際需求一般都是根據(jù)表數(shù)據(jù)動態(tài)來進行合并的，也會有更復(fù)雜的情況，比如循環(huán)表格的。
以下的例子中，表格數(shù)據(jù)是放在頁面的假數(shù)據(jù)，hbxh 值相同時，表示需要合并
示例一：單個表格
單個表格的比較簡單，知道合并方法的使用基本就好弄了
<template>
<div>
<el-form
ref="testForm"
:model="testForm"
style="height: 600px;"
>
<el-row
style="padding: 10px"
>
<el-table
:data="testForm.tableData"
:span-method="colSpanMethod"
border
style="width: 100%;"
>
<el-table-column prop="hbxh" label="合并序號" width="100" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
spanArr: [], // 用于存放每一行記錄的合并數(shù)
testForm: {
tableData: [
{
hbxh: '1',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
hbxh: '2',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
hbxh: '2',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
hbxh: '3',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
hbxh: '4',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
hbxh: '4',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}, {
hbxh: '4',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}
] // 測試數(shù)據(jù)
},
}
},
created() {
this.getSpanArr(this.testForm.tableData)
},
methods: {
getSpanArr(data) {
// data就是我們從后臺拿到的數(shù)據(jù)
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0;
} else {
// 判斷當(dāng)前對象的指定屬性值與上一個對象的指定屬性值是否相等
if (data[i].hbxh === data[i - 1].hbxh) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
},
colSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 2) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
console.log(`rowspan:${_row} colspan:${_col}`);
return {
// [0,0] 表示這一行不顯示， [2,1]表示行的合并數(shù)
rowspan: _row,
colspan: _col
};
}
}
}
}
</script>
效果：
示例二：循環(huán)表格
循環(huán)表格時，需要在表的每行數(shù)據(jù)傳入一個值，代表是第幾個表格，方便合并方法使用
<template>
<div>
<el-form
ref="testForm"
:model="testForm"
style="height: 600px;"
>
<el-row
v-for="(item, index) in testForm.tableList"
:key="index"
style="padding: 10px"
>
<el-table
:data="item"
:span-method="colSpanMethod"
border
style="width: 100%; margin-bottom: 20px;"
>
<el-table-column prop="hbxh" label="合并序號" width="100" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
spanArr: [], // 用于存放每一行記錄的合并數(shù)
testForm: {
tableList: [
[
{
hbxh: '1',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄',
tbIndex: 0
}, {
hbxh: '1',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄',
tbIndex: 0
}, {
hbxh: '2',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄',
tbIndex: 0
}, {
hbxh: '2',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄',
tbIndex: 0
}
],
[
{
hbxh: '1',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄',
tbIndex: 1
}, {
hbxh: '2',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄',
tbIndex: 1
}, {
hbxh: '2',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄',
tbIndex: 1
}, {
hbxh: '3',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄',
tbIndex: 1
}, {
hbxh: '4',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄',
tbIndex: 1
}, {
hbxh: '4',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄',
tbIndex: 1
}, {
hbxh: '4',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄',
tbIndex: 1
}
]
] // 測試數(shù)據(jù)
},
}
},
created() {
this.getSpanArr(this.testForm.tableList)
},
methods: {
getSpanArr(data) {
// 用一個對象數(shù)組來存放每個表中每一行記錄的合并數(shù)
for (let m = 0, n = data.length; m < n; m++) {
this.spanArr.push({
tbArr: []
});
}
for (let i = 0, l = data.length; i < l; i++) {
let contactDot = 0; // 記錄開始合并的行索引
data[i].forEach((item, index) => {
item.index = index
if (index === 0) {
this.spanArr[i].tbArr.push(1);
} else {
// 判斷當(dāng)前對象的指定屬性值與上一個對象的指定屬性值是否相等
if (item.hbxh === data[i][index - 1].hbxh) {
this.spanArr[i].tbArr[contactDot] += 1;
this.spanArr[i].tbArr.push(0);
} else {
this.spanArr[i].tbArr.push(1);
contactDot = index;
}
}
})
}
console.log('==========this.spanArr==========')
console.log(this.spanArr)
/* [
[2, 0, 2, 0],
[1, 2, 0, 1, 3, 0, 0]
] */
},
colSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 2) {
const _row = this.spanArr[row.tbIndex].tbArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
// [0,0] 表示這一行不顯示， [2,1]表示行的合并數(shù)
rowspan: _row,
colspan: _col
};
}
}
}
}
</script>
有循環(huán)的需求時，數(shù)據(jù)結(jié)構(gòu)會比較復(fù)雜，需要耐心理清數(shù)據(jù)之間的關(guān)系
效果：
合并的關(guān)鍵主要就是要準(zhǔn)確計算出每行記錄的合并數(shù)，計算邏輯可能每個人會想得不太一樣，以上的栗子僅代表一種實現(xiàn)方式，不同方式的朋友可以留言討論
>>>>>>>>>今天又發(fā)現(xiàn)了一種新的邏輯>>>>>>>>>>>>>(2021-11-29)
<template>
<div>
<el-form
ref="testForm"
:model="testForm"
style="height: 600px;"
>
<el-row
v-for="(item, index) in testForm.tableList"
:key="index"
style="padding: 10px"
>
<el-table
:data="item"
:span-method="colSpanMethod2"
border
style="width: 100%; margin-bottom: 20px;"
>
<el-table-column prop="hbxh" label="合并序號" width="100" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
spanArr: [], // 用于存放每一行記錄的合并數(shù)
testForm: {
tableList: [
[
{
hbxh: '1',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄',
tbIndex: 0
}, {
hbxh: '1',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄',
tbIndex: 0
}, {
hbxh: '2',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄',
tbIndex: 0
}, {
hbxh: '2',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄',
tbIndex: 0
}
],
[
{
hbxh: '1',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄',
tbIndex: 1
}, {
hbxh: '2',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄',
tbIndex: 1
}, {
hbxh: '2',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄',
tbIndex: 1
}, {
hbxh: '3',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄',
tbIndex: 1
}, {
hbxh: '4',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄',
tbIndex: 1
}, {
hbxh: '4',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄',
tbIndex: 1
}, {
hbxh: '4',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄',
tbIndex: 1
}
]
] // 測試數(shù)據(jù)
},
}
},
created() {
this.getSpanArr2(this.testForm.tableList)
},
methods: {
getSpanArr2(data) {
for (let i = 0, l = data.length; i < l; i++) {
let orderObj = {}
data[i].forEach((item, index) => {
// item.index = index
if (orderObj[item.hbxh]) {
orderObj[item.hbxh].push(index)
} else {
orderObj[item.hbxh] = []
orderObj[item.hbxh].push(index)
}
this.spanArr[i] = {
orderIndexArr: []
}
// 將數(shù)組長度大于1的值 存儲到this.orderIndexArr（也就是需要合并的項）
Object.keys(orderObj).forEach((key) => {
if (orderObj[key].length > 1) {
this.spanArr[i].orderIndexArr.push(orderObj[key])
}
})
})
}
console.log('==========this.spanArr==========')
console.log(this.spanArr)
},
colSpanMethod2({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 2) {
for (let i = 0, l = this.spanArr[row.tbIndex].orderIndexArr.length; i < l; i++) {
let element = this.spanArr[row.tbIndex].orderIndexArr[i]
for (let j = 0; j < element.length; j++) {
let item = element[j]
if (rowIndex === item) {
if (j === 0) {
return {
rowspan: element.length,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
}
}
}
}
</script>
效果：
同上
來看看前端打印的信息：
到此這篇關(guān)于el-table 行合并的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)el-table 行合并內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案
這篇文章主要介紹了vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
本篇文章主要介紹了Vue.js上下滾動加載組件的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
快速解決electron-builder打包時下載依賴慢的問題
使用 Electron-builder 打包,有時會在下載Electron、nsis、winCodeSign的過程中 Timeout 導(dǎo)致打包失敗,本文給大家分享快速解決electron-builder打包時下載依賴慢的問題,感興趣的朋友一起看看吧2024-02-02
這篇文章主要給大家介紹了關(guān)于el-table虛擬滾動的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-12-12
Vue3 + TypeScript 開發(fā)總結(jié)
本文直接上 Vue3 + TypeScript + Element Plus 開發(fā)的內(nèi)容，感興趣的話一起來看看吧2021-08-08
詳解Vue后臺管理系統(tǒng)開發(fā)日?？偨Y(jié)(組件PageHeader)
這篇文章主要介紹了詳解Vue后臺管理系統(tǒng)開發(fā)日?？偨Y(jié)(組件PageHeader)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
公共Hooks封裝useTableData表格數(shù)據(jù)實例
這篇文章主要為大家介紹了公共Hooks封裝useTableData表格數(shù)據(jù)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
vue實現(xiàn)鼠標(biāo)經(jīng)過顯示懸浮框效果
這篇文章主要為大家詳細介紹了vue實現(xiàn)鼠標(biāo)經(jīng)過顯示懸浮框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue發(fā)送Formdata數(shù)據(jù)及NodeJS接收方式
這篇文章主要介紹了Vue發(fā)送Formdata數(shù)據(jù)及NodeJS接收方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue3在router中使用store報錯解決方案,就是需要在實例化一下,因為在編譯router的時候pinia還未被實例化,文中補充介紹了vue3中router和store詳細使用教程方法,感興趣的朋友一起看看吧2023-11-11