Element?UI中table單元格合并的解決過(guò)程
更新時(shí)間：2022年08月25日 11:48:12 作者：beijixing333y
element?ui中的table表格數(shù)據(jù)是動(dòng)態(tài)生成的,最近遇到個(gè)需求,要求我們對(duì)單元格進(jìn)行合并,所以下面這篇文章主要給大家介紹了關(guān)于Element?UI中table單元格合并的解決過(guò)程,需要的朋友可以參考下
引言
項(xiàng)目中遇到表格單元格合并的需求，在此記錄整個(gè)解決過(guò)程。
項(xiàng)目使用的是 Element UI，表格使用的是 table 組件。Element UI 的 table 表格組件中對(duì)單元格進(jìn)行合并，需要使用 table 組件的 span-method 屬性。
先看一張成果圖（完整代碼放在末尾）：
解決思路：
1、格式化后臺(tái)返回的數(shù)據(jù)（根據(jù)實(shí)際數(shù)據(jù)格式處理）
項(xiàng)目后臺(tái)返回的數(shù)據(jù)格式為樹(shù)形結(jié)構(gòu)，這里做簡(jiǎn)化展示：
[
{
'column1': '111',
'column2': '222',
'column3': '333',
'children1': [
{
'column6': 666,
'column4': '4440',
'column5': '5550',
'children2': [
{
'column7': '77701',
'column8': '88801',
'column9': '99901'
}
]
}
]
}
]需要先將樹(shù)結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)為一維數(shù)組：
// table 表格數(shù)據(jù)初始化處理，將樹(shù)結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)為一維數(shù)組
handleData(data, parentId) {
data.map((res, index) => {
var obj = {
id: parentId
}
for (const key in res) {
const isarr = Object.values(res).find((age) => {
return Array.isArray(age)
})
if (isarr) {
if (Array.isArray(res[key])) {
for (let i = 0; i < res[key].length; i++) {
Object.assign(obj, res[key][i])
data.push(obj)
res[key].splice(i, 1)
if (res[key].length === 0) {
data.splice(index, 1)
}
this.handleData(data, parentId)
}
} else {
Object.assign(obj, { [key]: res[key] })
}
}
}
})
return data
}因?yàn)楹笈_(tái)返回的數(shù)據(jù)里沒(méi)有唯一標(biāo)識(shí)符，所以需要單獨(dú)添加一個(gè)唯一標(biāo)識(shí)表示轉(zhuǎn)換為一維數(shù)組的數(shù)據(jù)是出自同一組樹(shù)結(jié)構(gòu)里。故此處在展開(kāi)時(shí)單獨(dú)加了一個(gè) id 屬性，用來(lái)代替唯一標(biāo)識(shí)。如果后臺(tái)返回的數(shù)據(jù)格式就是一個(gè)一維數(shù)組，可跳過(guò)數(shù)據(jù)格式化步驟。
2、在 data 中定義數(shù)據(jù)，需要合并幾列就定義幾個(gè)數(shù)組和索引
data() {
return {
tableData: [],
// 合并單元格
column1Arr: [], // column1
column1Index: 0, // column1索引
column2Arr: [], // column2
column2Index: 0, // column2索引
column3Arr: [], // column3
column3Index: 0, // column3索引
column4Arr: [], // column4
column4Index: 0, // column4
column5Arr: [], // column5
column5Index: 0, // column5索引
column6Arr: [], // column6
column6Index: 0 // column6索引
}
}3、定義合并函數(shù)
以第一行為基準(zhǔn)，一層層對(duì)比，參數(shù) data 就是格式化以后的表格數(shù)據(jù)，以每個(gè)數(shù)據(jù)里的唯一標(biāo)識(shí) id 作為合并的參照字段：
// 初始化合并行數(shù)組
mergeInit() {
this.column1Arr = [] // column1
this.column1Index = 0 // column1索引
this.column2Arr = [] // column2
this.column2Index = 0 // column2索引
this.column3Arr = [] // column3
this.column3Index = 0 // column3索引
this.column4Arr = [] // column4
this.column4Index = 0 // column4索引
this.column5Arr = [] // column5
this.column5Index = 0 // column5索引
this.column6Arr = [] // column6
this.column6Index = 0 // column6索引
},
// 合并表格
mergeTable(data) {
this.mergeInit()
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
// 第一行必須存在，以第一行為基準(zhǔn)
this.column1Arr.push(1) // column1
this.column1Index = 0
this.column2Arr.push(1) // column2
this.column2Index = 0
this.column3Arr.push(1) // column3
this.column3Index = 0
this.column4Arr.push(1) // column4
this.column4Index = 0
this.column5Arr.push(1) // column5
this.column5Index = 0
this.column6Arr.push(1) // column6
this.column6Index = 0
} else {
// 判斷當(dāng)前元素與上一元素是否相同
// column1
if (
data[i].column1 === data[i - 1].column1 &&
data[i].id === data[i - 1].id
) {
this.column1Arr[this.column1Index] += 1
this.column1Arr.push(0)
} else {
this.column1Arr.push(1)
this.column1Index = i
}
// column2
if (
data[i].column2 === data[i - 1].column2 &&
data[i].id === data[i - 1].id
) {
this.column2Arr[this.column2Index] += 1
this.column2Arr.push(0)
} else {
this.column2Arr.push(1)
this.column2Index = i
}
// column3
if (
data[i].column3 === data[i - 1].column3 &&
data[i].id === data[i - 1].id
) {
this.column3Arr[this.column3Index] += 1
this.column3Arr.push(0)
} else {
this.column3Arr.push(1)
this.column3Index = i
}
// column4
if (
data[i].column4 === data[i - 1].column4 &&
data[i].id === data[i - 1].id
) {
this.column4Arr[this.column4Index] += 1
this.column4Arr.push(0)
} else {
this.column4Arr.push(1)
this.column4Index = i
}
// column5
if (
data[i].column5 === data[i - 1].column5 &&
data[i].column4 === data[i - 1].column4 &&
data[i].id === data[i - 1].id
) {
this.column5Arr[this.column5Index] += 1
this.column5Arr.push(0)
} else {
this.column5Arr.push(1)
this.column5Index = i
}
// column6
if (
data[i].column6 === data[i - 1].column6 &&
data[i].column4 === data[i - 1].column4 &&
data[i].id === data[i - 1].id
) {
this.column6Arr[this.column6Index] += 1
this.column6Arr.push(0)
} else {
this.column6Arr.push(1)
this.column6Index = i
}
}
}
}
},注意，同一組數(shù)據(jù)里可能會(huì)有多個(gè) children1 或者 children2，這時(shí)合并的時(shí)候會(huì)有多個(gè)條件進(jìn)行判斷：
4、table 組件屬性 span-method 的單元格合并方法：
handleSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1) {
// 第一列 column1
const _row_1 = this.column1Arr[rowIndex]
const _col_1 = _row_1 > 0 ? 1 : 0
return {
rowspan: _row_1,
colspan: _col_1
}
} else if (columnIndex === 2) {
// 第二列 column2
const _row_2 = this.column2Arr[rowIndex]
const _col_2 = _row_2 > 0 ? 1 : 0
return {
rowspan: _row_2,
colspan: _col_2
}
} else if (columnIndex === 3) {
// 第三列 column3
const _row_2 = this.column3Arr[rowIndex]
const _col_2 = _row_2 > 0 ? 1 : 0
return {
rowspan: _row_2,
colspan: _col_2
}
} else if (columnIndex === 4) {
// 第四列 column4
const _row_2 = this.column4Arr[rowIndex]
const _col_2 = _row_2 > 0 ? 1 : 0
return {
rowspan: _row_2,
colspan: _col_2
}
} else if (columnIndex === 5) {
// 第五列 column5
const _row_2 = this.column5Arr[rowIndex]
const _col_2 = _row_2 > 0 ? 1 : 0
return {
rowspan: _row_2,
colspan: _col_2
}
} else if (columnIndex === 6) {
// 第六列 column6
const _row_2 = this.column6Arr[rowIndex]
const _col_2 = _row_2 > 0 ? 1 : 0
return {
rowspan: _row_2,
colspan: _col_2
}
}
}至此，整個(gè)單元格合并就完成了！
如果覺(jué)得寫(xiě)得還不錯(cuò)，還請(qǐng)點(diǎn)贊支持，感謝感謝感謝?。?！
完整代碼：
<template>
<div class="table-wrap">
<el-table
:data="tableData"
:span-method="handleSpanMethod"
:cell-style="{ background: '#FFFFFF' }"
border
style="width: 100%"
>
<el-table-column prop="id" label="序號(hào)" align="center" width="80">
<template slot-scope="scope">
{{ scope.row.id + 1 }}
</template>
</el-table-column>
<el-table-column prop="column1" label="column1" align="center" />
<el-table-column prop="column2" label="column2" align="center" />
<el-table-column prop="column3" label="column3" align="center" />
<el-table-column prop="column4" label="column4" align="center" />
<el-table-column prop="column5" label="column5" align="center" />
<el-table-column prop="column6" label="column6" align="center" />
<el-table-column prop="column7" label="column7" align="center" />
<el-table-column prop="column8" label="column8" align="center" />
<el-table-column prop="column9" label="column9" align="center" />
</el-table>
</div>
</template>
<script>
export default {
name: 'CellMerge',
data() {
return {
tableData: [],
// 合并單元格
column1Arr: [], // column1
column1Index: 0, // column1索引
column2Arr: [], // column2
column2Index: 0, // column2索引
column3Arr: [], // column3
column3Index: 0, // column3索引
column4Arr: [], // column4
column4Index: 0, // column4
column5Arr: [], // column5
column5Index: 0, // column5索引
column6Arr: [], // column6
column6Index: 0 // column6索引
}
},
mounted() {
this.initTableData()
},
methods: {
// 初始化表格數(shù)據(jù)
initTableData() {
const newTableData = [
{
'column1': '111',
'column2': '222',
'column3': '333',
'children1': [
{
'column6': 666,
'column4': '4440',
'column5': '5550',
'children2': [
{
'column7': '77701',
'column8': '88801',
'column9': '99901'
},
{
'column7': '77702',
'column8': '88802',
'column9': '99902'
},
{
'column7': '77703',
'column8': '88803',
'column9': '99903'
}
]
},
{
'column6': 666,
'column4': '4441',
'column5': '5551',
'children2': [
{
'column7': '77711',
'column8': '88811',
'column9': '99911'
}
]
},
{
'column6': 666,
'column4': '4442',
'column5': '5552',
'children2': [
{
'column7': '77721',
'column8': '88821',
'column9': '99921'
},
{
'column7': '77722',
'column8': '88822',
'column9': '99922'
}
]
}
]
},
{
'column1': '111',
'column2': '222',
'column3': '333',
'children1': [
{
'column6': 666,
'column4': '4440',
'column5': '5550',
'children2': [
{
'column7': '77701',
'column8': '88801',
'column9': '99901'
}
]
},
{
'column6': 666,
'column4': '4441',
'column5': '5551',
'children2': [
{
'column7': '77711',
'column8': '88811',
'column9': '99911'
},
{
'column7': '77712',
'column8': '88812',
'column9': '99912'
}
]
}
]
},
{
'column1': '111',
'column2': '222',
'column3': '333',
'children1': [
{
'column6': 666,
'column4': '4440',
'column5': '5550',
'children2': [
{
'column7': '77701',
'column8': '88801',
'column9': '99901'
},
{
'column7': '77702',
'column8': '88802',
'column9': '99902'
},
{
'column7': '77703',
'column8': '88803',
'column9': '99903'
}
]
},
{
'column6': 666,
'column4': '4441',
'column5': '5551',
'children2': [
{
'column7': '77711',
'column8': '88811',
'column9': '99911'
}
]
}
]
}
]
this.tableData = []
newTableData.map((res, index) => {
const parentId = index
this.tableData.push.apply(
this.tableData,
this.handleData([res], parentId)
)
})
this.mergeTable(this.tableData)
},
// table 表格數(shù)據(jù)初始化處理，將樹(shù)結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)為一維數(shù)組
handleData(data, parentId) {
data.map((res, index) => {
var obj = {
id: parentId
}
for (const key in res) {
const isarr = Object.values(res).find((age) => {
return Array.isArray(age)
})
if (isarr) {
if (Array.isArray(res[key])) {
for (let i = 0; i < res[key].length; i++) {
Object.assign(obj, res[key][i])
data.push(obj)
res[key].splice(i, 1)
if (res[key].length === 0) {
data.splice(index, 1)
}
this.handleData(data, parentId)
}
} else {
Object.assign(obj, { [key]: res[key] })
}
}
}
})
return data
},
// 初始化合并行數(shù)組
mergeInit() {
this.column1Arr = [] // column1
this.column1Index = 0 // column1索引
this.column2Arr = [] // column2
this.column2Index = 0 // column2索引
this.column3Arr = [] // column3
this.column3Index = 0 // column3索引
this.column4Arr = [] // column4
this.column4Index = 0 // column4索引
this.column5Arr = [] // column5
this.column5Index = 0 // column5索引
this.column6Arr = [] // column6
this.column6Index = 0 // column6索引
},
// 合并表格
mergeTable(data) {
this.mergeInit()
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
// 第一行必須存在，以第一行為基準(zhǔn)
this.column1Arr.push(1) // column1
this.column1Index = 0
this.column2Arr.push(1) // column2
this.column2Index = 0
this.column3Arr.push(1) // column3
this.column3Index = 0
this.column4Arr.push(1) // column4
this.column4Index = 0
this.column5Arr.push(1) // column5
this.column5Index = 0
this.column6Arr.push(1) // column6
this.column6Index = 0
} else {
// 判斷當(dāng)前元素與上一元素是否相同
// column1
if (
data[i].column1 === data[i - 1].column1 &&
data[i].id === data[i - 1].id
) {
this.column1Arr[this.column1Index] += 1
this.column1Arr.push(0)
} else {
this.column1Arr.push(1)
this.column1Index = i
}
// column2
if (
data[i].column2 === data[i - 1].column2 &&
data[i].id === data[i - 1].id
) {
this.column2Arr[this.column2Index] += 1
this.column2Arr.push(0)
} else {
this.column2Arr.push(1)
this.column2Index = i
}
// column3
if (
data[i].column3 === data[i - 1].column3 &&
data[i].id === data[i - 1].id
) {
this.column3Arr[this.column3Index] += 1
this.column3Arr.push(0)
} else {
this.column3Arr.push(1)
this.column3Index = i
}
// column4
if (
data[i].column4 === data[i - 1].column4 &&
data[i].id === data[i - 1].id
) {
this.column4Arr[this.column4Index] += 1
this.column4Arr.push(0)
} else {
this.column4Arr.push(1)
this.column4Index = i
}
// column5
if (
data[i].column5 === data[i - 1].column5 &&
data[i].column4 === data[i - 1].column4 &&
data[i].id === data[i - 1].id
) {
this.column5Arr[this.column5Index] += 1
this.column5Arr.push(0)
} else {
this.column5Arr.push(1)
this.column5Index = i
}
// column6
if (
data[i].column6 === data[i - 1].column6 &&
data[i].column4 === data[i - 1].column4 &&
data[i].id === data[i - 1].id
) {
this.column6Arr[this.column6Index] += 1
this.column6Arr.push(0)
} else {
this.column6Arr.push(1)
this.column6Index = i
}
}
}
}
},
handleSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1) {
// 第一列 column1
const _row_1 = this.column1Arr[rowIndex]
const _col_1 = _row_1 > 0 ? 1 : 0
return {
rowspan: _row_1,
colspan: _col_1
}
} else if (columnIndex === 2) {
// 第二列 column2
const _row_2 = this.column2Arr[rowIndex]
const _col_2 = _row_2 > 0 ? 1 : 0
return {
rowspan: _row_2,
colspan: _col_2
}
} else if (columnIndex === 3) {
// 第三列 column3
const _row_2 = this.column3Arr[rowIndex]
const _col_2 = _row_2 > 0 ? 1 : 0
return {
rowspan: _row_2,
colspan: _col_2
}
} else if (columnIndex === 4) {
// 第四列 column4
const _row_2 = this.column4Arr[rowIndex]
const _col_2 = _row_2 > 0 ? 1 : 0
return {
rowspan: _row_2,
colspan: _col_2
}
} else if (columnIndex === 5) {
// 第五列 column5
const _row_2 = this.column5Arr[rowIndex]
const _col_2 = _row_2 > 0 ? 1 : 0
return {
rowspan: _row_2,
colspan: _col_2
}
} else if (columnIndex === 6) {
// 第六列 column6
const _row_2 = this.column6Arr[rowIndex]
const _col_2 = _row_2 > 0 ? 1 : 0
return {
rowspan: _row_2,
colspan: _col_2
}
}
}
}
}
</script>
<style lang="scss" scoped>
.table-wrap {
width: 100%;
height: 100%;
padding: 20px;
}
</style>總結(jié)
到此這篇關(guān)于Element UI中table單元格合并的文章就介紹到這了,更多相關(guān)Element UI table單元格合并內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue基于viewer實(shí)現(xiàn)的圖片查看器功能
這篇文章主要介紹了vue基于viewer實(shí)現(xiàn)的圖片查看器的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue遞歸生成樹(shù)狀結(jié)構(gòu)的示例代碼
這篇文章主要介紹了vue遞歸生成樹(shù)狀結(jié)構(gòu)的示例,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07
vue實(shí)踐---vue不依賴外部資源實(shí)現(xiàn)簡(jiǎn)單多語(yǔ)操作
這篇文章主要介紹了vue實(shí)踐---vue不依賴外部資源實(shí)現(xiàn)簡(jiǎn)單多語(yǔ)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue轉(zhuǎn)electron項(xiàng)目及解決使用fs報(bào)錯(cuò):Module?not?found:?Error:?Can&apo
這篇文章主要給大家介紹了關(guān)于vue轉(zhuǎn)electron項(xiàng)目及解決使用fs報(bào)錯(cuò):Module?not?found:?Error:?Can‘t?resolve?‘fs‘?in的相關(guān)資料,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
在使用Element Plus中的table組件展示數(shù)據(jù)時(shí),由于需要對(duì)表格行內(nèi)數(shù)據(jù)的數(shù)據(jù)進(jìn)行修改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus修改表格行和單元格樣式的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Vue package.json配置，package.json是每個(gè)前端項(xiàng)目都會(huì)有的json文件，位于項(xiàng)目的根目錄中。很多腳手架在創(chuàng)建項(xiàng)目的時(shí)候會(huì)幫我們自動(dòng)初始化好 package.json2023-01-01
vue移動(dòng)端項(xiàng)目緩存問(wèn)題實(shí)踐記錄
最近在做一個(gè)vue移動(dòng)端項(xiàng)目，被緩存問(wèn)題搞得頭都大了，積累了一些經(jīng)驗(yàn)，特此記錄總結(jié)下，分享到腳本之家平臺(tái)，對(duì)vue移動(dòng)端項(xiàng)目緩存問(wèn)題實(shí)踐記錄感興趣的朋友跟隨小編一起看看吧2018-10-10
本文主要介紹了vue拖拽改變寬度的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問(wèn)題
今天小編就為大家分享一篇基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
關(guān)閉eslint檢查和ts檢查的簡(jiǎn)單步驟記錄
這篇文章主要給大家介紹了關(guān)于關(guān)閉eslint檢查和ts檢查的相關(guān)資料,eslint是一個(gè)JavaScript的校驗(yàn)插件,通常用來(lái)校驗(yàn)語(yǔ)法或代碼的書(shū)寫(xiě)風(fēng)格,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02