el-table 行合并的實(shí)現(xiàn)示例
頁面實(shí)現(xiàn)行合并的情況還是比較常見的,但實(shí)現(xiàn)起來卻有一點(diǎn)點(diǎn)難。官網(wǎng)的例子有,不過人家的合并邏輯是從第一行開始兩行兩行合并,不能根據(jù)數(shù)據(jù)動態(tài)合并,感覺參考意義不太大。實(shí)際需求一般都是根據(jù)表數(shù)據(jù)動態(tài)來進(jìn)行合并的,也會有更復(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ù),計算邏輯可能每個人會想得不太一樣,以上的栗子僅代表一種實(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(也就是需要合并的項(xiàng)) 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 行合并的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)el-table 行合并內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案
這篇文章主要介紹了vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01快速解決electron-builder打包時下載依賴慢的問題
使用 Electron-builder 打包,有時會在下載Electron、nsis、winCodeSign的過程中 Timeout 導(dǎo)致打包失敗,本文給大家分享快速解決electron-builder打包時下載依賴慢的問題,感興趣的朋友一起看看吧2024-02-02vue.js?el-table虛擬滾動完整實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于el-table虛擬滾動的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-12-12Vue3 + TypeScript 開發(fā)總結(jié)
本文直接上 Vue3 + TypeScript + Element Plus 開發(fā)的內(nèi)容,感興趣的話一起來看看吧2021-08-08詳解Vue后臺管理系統(tǒng)開發(fā)日??偨Y(jié)(組件PageHeader)
這篇文章主要介紹了詳解Vue后臺管理系統(tǒng)開發(fā)日常總結(jié)(組件PageHeader),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11公共Hooks封裝useTableData表格數(shù)據(jù)實(shí)例
這篇文章主要為大家介紹了公共Hooks封裝useTableData表格數(shù)據(jù)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示懸浮框效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示懸浮框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03Vue發(fā)送Formdata數(shù)據(jù)及NodeJS接收方式
這篇文章主要介紹了Vue發(fā)送Formdata數(shù)據(jù)及NodeJS接收方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06