Element UI 的 table 单元格合并

项目中遇到表格单元格合并的需求，在此记录整个解决过程。

项目使用的是 Element UI，表格使用的是 table 组件。Element UI 的 table 表格组件中对单元格进行合并，需要使用 table 组件的 span-method 属性。

先看一张成果图（完整代码放在末尾）：

解决思路：

1、格式化后台返回的数据（根据实际数据格式处理）

项目后台返回的数据格式为树形结构，这里做简化展示：

[{'column1': '111','column2': '222','column3': '333','children1': [{'column6': 666,'column4': '4440','column5': '5550','children2': [{'column7': '77701','column8': '88801','column9': '99901'}]}]}
]

需要先将树结构数据转为一维数组：

// table 表格数据初始化处理，将树结构数据转为一维数组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}

因为后台返回的数据里没有唯一标识符，所以需要单独添加一个唯一标识表示转换为一维数组的数据是出自同一组树结构里。故此处在展开时单独加了一个 id 属性，用来代替唯一标识。如果后台返回的数据格式就是一个一维数组，可跳过数据格式化步骤。

2、在 data 中定义数据，需要合并几列就定义几个数组和索引

  data() {return {tableData: [],// 合并单元格column1Arr: [], // column1column1Index: 0, // column1索引column2Arr: [], // column2column2Index: 0, // column2索引column3Arr: [], // column3column3Index: 0, // column3索引column4Arr: [], // column4column4Index: 0, // column4column5Arr: [], // column5column5Index: 0, // column5索引column6Arr: [], // column6column6Index: 0 // column6索引}}

3、定义合并函数

以第一行为基准，一层层对比，参数 data 就是格式化以后的表格数据，以每个数据里的唯一标识 id 作为合并的参照字段：

    // 初始化合并行数组mergeInit() {this.column1Arr = [] // column1this.column1Index = 0 // column1索引this.column2Arr = [] // column2this.column2Index = 0 // column2索引this.column3Arr = [] // column3this.column3Index = 0 // column3索引this.column4Arr = [] // column4this.column4Index = 0 // column4索引this.column5Arr = [] // column5this.column5Index = 0 // column5索引this.column6Arr = [] // column6this.column6Index = 0 // column6索引},// 合并表格mergeTable(data) {this.mergeInit()if (data.length > 0) {for (var i = 0; i < data.length; i++) {if (i === 0) {// 第一行必须存在，以第一行为基准this.column1Arr.push(1) // column1this.column1Index = 0this.column2Arr.push(1) // column2this.column2Index = 0this.column3Arr.push(1) // column3this.column3Index = 0this.column4Arr.push(1) // column4this.column4Index = 0this.column5Arr.push(1) // column5this.column5Index = 0this.column6Arr.push(1) // column6this.column6Index = 0} else {// 判断当前元素与上一元素是否相同// column1if (data[i].column1 === data[i - 1].column1 &&data[i].id === data[i - 1].id) {this.column1Arr[this.column1Index] += 1this.column1Arr.push(0)} else {this.column1Arr.push(1)this.column1Index = i}// column2if (data[i].column2 === data[i - 1].column2 &&data[i].id === data[i - 1].id) {this.column2Arr[this.column2Index] += 1this.column2Arr.push(0)} else {this.column2Arr.push(1)this.column2Index = i}// column3if (data[i].column3 === data[i - 1].column3 &&data[i].id === data[i - 1].id) {this.column3Arr[this.column3Index] += 1this.column3Arr.push(0)} else {this.column3Arr.push(1)this.column3Index = i}// column4if (data[i].column4 === data[i - 1].column4 &&data[i].id === data[i - 1].id) {this.column4Arr[this.column4Index] += 1this.column4Arr.push(0)} else {this.column4Arr.push(1)this.column4Index = i}// column5if (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] += 1this.column5Arr.push(0)} else {this.column5Arr.push(1)this.column5Index = i}// column6if (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] += 1this.column6Arr.push(0)} else {this.column6Arr.push(1)this.column6Index = i}}}}},

注意，同一组数据里可能会有多个 children1 或者 children2，这时合并的时候会有多个条件进行判断：

4、table 组件属性 span-method 的单元格合并方法：

    handleSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0 || columnIndex === 1) {// 第一列 column1const _row_1 = this.column1Arr[rowIndex]const _col_1 = _row_1 > 0 ? 1 : 0return {rowspan: _row_1,colspan: _col_1}} else if (columnIndex === 2) {// 第二列 column2const _row_2 = this.column2Arr[rowIndex]const _col_2 = _row_2 > 0 ? 1 : 0return {rowspan: _row_2,colspan: _col_2}} else if (columnIndex === 3) {// 第三列 column3const _row_2 = this.column3Arr[rowIndex]const _col_2 = _row_2 > 0 ? 1 : 0return {rowspan: _row_2,colspan: _col_2}} else if (columnIndex === 4) {// 第四列 column4const _row_2 = this.column4Arr[rowIndex]const _col_2 = _row_2 > 0 ? 1 : 0return {rowspan: _row_2,colspan: _col_2}} else if (columnIndex === 5) {// 第五列 column5const _row_2 = this.column5Arr[rowIndex]const _col_2 = _row_2 > 0 ? 1 : 0return {rowspan: _row_2,colspan: _col_2}} else if (columnIndex === 6) {// 第六列 column6const _row_2 = this.column6Arr[rowIndex]const _col_2 = _row_2 > 0 ? 1 : 0return {rowspan: _row_2,colspan: _col_2}}}

至此，整个单元格合并就完成了！

如果觉得写得还不错，还请点赞支持，感谢感谢感谢！！！

完整代码：

<template><div class="table-wrap"><el-table:data="tableData":span-method="handleSpanMethod":cell-style="{ background: '#FFFFFF' }"borderstyle="width: 100%"><el-table-column prop="id" label="序号" 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: [], // column1column1Index: 0, // column1索引column2Arr: [], // column2column2Index: 0, // column2索引column3Arr: [], // column3column3Index: 0, // column3索引column4Arr: [], // column4column4Index: 0, // column4column5Arr: [], // column5column5Index: 0, // column5索引column6Arr: [], // column6column6Index: 0 // column6索引}},mounted() {this.initTableData()},methods: {// 初始化表格数据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 = indexthis.tableData.push.apply(this.tableData,this.handleData([res], parentId))})this.mergeTable(this.tableData)},// table 表格数据初始化处理，将树结构数据转为一维数组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},// 初始化合并行数组mergeInit() {this.column1Arr = [] // column1this.column1Index = 0 // column1索引this.column2Arr = [] // column2this.column2Index = 0 // column2索引this.column3Arr = [] // column3this.column3Index = 0 // column3索引this.column4Arr = [] // column4this.column4Index = 0 // column4索引this.column5Arr = [] // column5this.column5Index = 0 // column5索引this.column6Arr = [] // column6this.column6Index = 0 // column6索引},// 合并表格mergeTable(data) {this.mergeInit()if (data.length > 0) {for (var i = 0; i < data.length; i++) {if (i === 0) {// 第一行必须存在，以第一行为基准this.column1Arr.push(1) // column1this.column1Index = 0this.column2Arr.push(1) // column2this.column2Index = 0this.column3Arr.push(1) // column3this.column3Index = 0this.column4Arr.push(1) // column4this.column4Index = 0this.column5Arr.push(1) // column5this.column5Index = 0this.column6Arr.push(1) // column6this.column6Index = 0} else {// 判断当前元素与上一元素是否相同// column1if (data[i].column1 === data[i - 1].column1 &&data[i].id === data[i - 1].id) {this.column1Arr[this.column1Index] += 1this.column1Arr.push(0)} else {this.column1Arr.push(1)this.column1Index = i}// column2if (data[i].column2 === data[i - 1].column2 &&data[i].id === data[i - 1].id) {this.column2Arr[this.column2Index] += 1this.column2Arr.push(0)} else {this.column2Arr.push(1)this.column2Index = i}// column3if (data[i].column3 === data[i - 1].column3 &&data[i].id === data[i - 1].id) {this.column3Arr[this.column3Index] += 1this.column3Arr.push(0)} else {this.column3Arr.push(1)this.column3Index = i}// column4if (data[i].column4 === data[i - 1].column4 &&data[i].id === data[i - 1].id) {this.column4Arr[this.column4Index] += 1this.column4Arr.push(0)} else {this.column4Arr.push(1)this.column4Index = i}// column5if (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] += 1this.column5Arr.push(0)} else {this.column5Arr.push(1)this.column5Index = i}// column6if (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] += 1this.column6Arr.push(0)} else {this.column6Arr.push(1)this.column6Index = i}}}}},handleSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0 || columnIndex === 1) {// 第一列 column1const _row_1 = this.column1Arr[rowIndex]const _col_1 = _row_1 > 0 ? 1 : 0return {rowspan: _row_1,colspan: _col_1}} else if (columnIndex === 2) {// 第二列 column2const _row_2 = this.column2Arr[rowIndex]const _col_2 = _row_2 > 0 ? 1 : 0return {rowspan: _row_2,colspan: _col_2}} else if (columnIndex === 3) {// 第三列 column3const _row_2 = this.column3Arr[rowIndex]const _col_2 = _row_2 > 0 ? 1 : 0return {rowspan: _row_2,colspan: _col_2}} else if (columnIndex === 4) {// 第四列 column4const _row_2 = this.column4Arr[rowIndex]const _col_2 = _row_2 > 0 ? 1 : 0return {rowspan: _row_2,colspan: _col_2}} else if (columnIndex === 5) {// 第五列 column5const _row_2 = this.column5Arr[rowIndex]const _col_2 = _row_2 > 0 ? 1 : 0return {rowspan: _row_2,colspan: _col_2}} else if (columnIndex === 6) {// 第六列 column6const _row_2 = this.column6Arr[rowIndex]const _col_2 = _row_2 > 0 ? 1 : 0return {rowspan: _row_2,colspan: _col_2}}}}
}
</script>
<style lang="scss" scoped>.table-wrap {width: 100%;height: 100%;padding: 20px;}
</style>

Element UI 的 table 单元格合并相关推荐

element ui 的table单元格合并
element ui中的table表格数据是动态生成的,如果说后台要求我们对单元格进行合并,这个时候需要借助一个api,:span-method="arraySpanMethod" ...
Vue.js 根据数据，进行Table单元格合并
Vue.js 根据数据,进行Table单元格合并 ITKouSyou 2018-10-16 14:29:40 3493 收藏 2 展开表格代码 <table cellspacing=&q ...
Vue.js 根据数据，进行Table单元格合并(原生方式以及element组件方式)
表格代码 <table cellspacing="0" cellpadding="0" border="0" style=" ...
layui table 单元格合并
在表格加载完成方法执行 done:function(res, curr, count){ merge(res); } //合并单元格 funct ...
table单元格合并
colspan是横向合并:rowspan是纵向合并.如 <td class="subject" colspan="2">回复觉得很分阶段方</ ...
表格（table属性、th/td属性、单元格合并）
表格现在HTML 表格应该用于表格数据语法:表格的容器<table>行<tr><td>普通单元格</td><th>表头单元格</ ...
Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...
Element Table 单元格中嵌套表格（Table）合并行效果
在Element中实现表格合并行功能一般是通过自定义span-method方法,此方法要求表格数据源中需要合并行的单元格中数据相同,根据相同数据来实现合并算法. 本例通过在父Table单元格中嵌套子T ...
ElementUI table 单元格编辑合并
我的需求: 看公司的低代码平台有使用这种方式,所以想研究研究,后期项目里使用. 我需要解决的问题: 如何通过数据对ElementUI的表格组件中单元格的编辑功能进行处理,输入框和表格样式如何切换表格 ...

Element UI 的 table 单元格合并

Element UI 的 table 单元格合并相关推荐

最新文章

热门文章