此篇为第一版，写法有问题，最终版请查看https://blog.csdn.net/CuiCui_web/article/details/103767614
首先看一下效果图，根据评估人来进行合并（有相同内容的列都可以通过这种方式进行合并列）
<el-table :data="tableData"
ref="tableDialog"
height="450px"
:span-method="objectSpanMethod"
style="width: 100%;margin-bottom: 20px;"
default-expand-all
row-key="id"
@expand-change="expandChange"
border>
在表格上需要绑定两个方法，
第二步
表格数据的获取（调用接口），将表格树数据处理到一个集合中，并给每棵树增加一个show属性，用于区分树是否展开
getData(){
this.tableData = res.jectList
// 为表格中的数据都增加一个show字段，用于判断树是否显示
this.tableData.forEach((item,index)=>{
item.show = true
})
let arrObject = []
this.tableData.forEach((item,index)=>{
arrObject.push(item)
if(item.children){
item.children.forEach((it,index)=>{
arrObject.push(it)
})
}
})
this.setdates(arrObject)}
扫描二维码关注公众号，回复：
9758366 查看本文章
第三步写合并列数组处理方法
/** 合并列数的方法 */
setdates(arr) {
var obj = {}, k;
for(var i = 0, len = arr.length; i < len; i++) {
k = arr[i].name;
if(obj[k])
obj[k]++;
else
obj[k] = 1;
}
console.log(obj,'88')
//保存结果{el-'元素'，count-出现次数}
for (var o in obj) {
if(o == 'undefined'){
this.spanArr.push(0) // 0代表不合并
}else{
for (let i = 0; i < obj[o]; i++) {
if (i === 0) {
this.spanArr.push(obj[o])
} else {
this.spanArr.push(0) // 0代表不合并
}
}
}
}
console.log(this.spanArr,'uuuuuu');
},/** 合并方法 */
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 7 || columnIndex === 8 || columnIndex === 9) {
let _row = this.spanArr[rowIndex] ? this.spanArr[rowIndex] : 0
console.log(_row,'v')
return {
rowspan: _row,
colspan: 1
}
}
},上面的写法，不支持树收起，打开等操作的处理。
第四步，当树的展开，收起状态发生变化时
/** 表格中树展开或关闭触发事件 */
expandChange(row, expandedRows){
let arrObject = [] // 接收表格中树数据的转化
this.spanArr = []
this.tableData.forEach((item,index)=>{
// show字段主要是用来区分当前表格中哪些树是展开的
if(row.id == item.id){
// 如果是当前点击的行，就将当前是否展开的属性赋值给show这个字段
item.show = expandedRows
}
// 得到表格中数据的集合
arrObject.push(item)
// 如果字段show为true(树展开)
if(item.show){
if(item.children ){
item.children.forEach((it,index)=>{
arrObject.push(it)
})
}
}else{
// 节点是关闭状态 如果数据存在子节点
if(item.children){
// 节点关闭状态 ，如果是表格中最后一棵树，需要push进数组中
if(item == this.tableData[this.tableData.length-1]){
item.children.forEach((it,index)=>{
arrObject.push(it)
})
}else{
// 其他情况，push任意值进数组，但不能不push
item.children.forEach((it,index)=>{
arrObject.push(22)
})
}
}
}
})
// 调用合并列数的方法 0 为不合并
this.setdates(arrObject)
},上述这中写法，当遇到特殊情况的时候会出现问题。下面提供一下优化后的代码。主要是修改了setdates，objectSpanMethod 这两个方法
/** 合并列数的方法 */
setdates: function (arr) {
console.log(arr, 'gggqqqqqqqqqqqqqqqqqqqqqqqqq')
// 转化数组
var kpiObjArr = []
for (var i = 0, len = arr.length; i < len; i++) {
if (arr[i] === 22) {
kpiObjArr.push(0)
} else {
kpiObjArr.push(arr[i].name)
}
}
console.log(kpiObjArr, 'kpiObjArrkpiObjArrkpiObjArrkpiObjArr')
// eslint-disable-next-line one-var
var obj = {}, k, objArrList = [];
var arrList = []
var endArr = []
// eslint-disable-next-line no-redeclare
for (var i = 0, len = arr.length; i < len; i++) {
k = arr[i].name;
console.log(k, 'gggg');
console.log(obj[k], 'obj[k]')
endArr.push(obj[k])
if (obj[k]) {
obj[k]++;
objArrList[k]++;
} else {
obj[k] = 1;
objArrList[k] = 1
}
}
console.log(arrList, '88')
var numArr = []
console.log(obj, 'objkkkkkkkkkkkkkkkkkkkkkkkk', objArrList)
// 保存结果{el-'元素'，count-出现次数}
for (var o in obj) {
// debugger
console.log(typeof (o))
console.log(o, 'lllll')
if (o === 'undefined') {
if (this.tableData[0].name !== this.tableData[1].name) {
if (o === 'undefined' && numArr[0] > 2) {
for (let i = 0; i < obj[o]; i++) {
this.spanArr.push(0) // 0代表不合并
}
} else if (o === 'undefined' && numArr[0] <= 2) {
this.spanArr.push(0) // 0代表不合并
}
} else {
if (o === 'undefined') {
for (let i = 0; i < obj[o]; i++) {
this.spanArr.push(0) // 0代表不合并
}
}
}
} else {
numArr.push(obj[o]);
for (let i = 0; i < obj[o]; i++) {
console.log(obj[o], 'obj[o]obj[o]obj[o]')
if (i === 0) {
this.spanArr.push(obj[o])
} else {
this.spanArr.push(0) // 0代表不合并
}
}
}
}
console.log(arrList, 'arrList555555555')
console.log(this.spanArr, 'uuuuuu');
console.log(numArr, 'numArr222222222222222')
// eslint-disable-next-line no-redeclare
for (var i = 0; i < arr.length; i++) {
if (arr[i] === 22 && this.spanArr[i] === 1 && this.spanArr[i] !== 0) {
this.spanArr[i] = 0;
this.spanArr[i - 1] = 1;
}
}
console.log(this.spanArr, 'uuuuuu');
},objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 8 || columnIndex === 9 || columnIndex === 10) {
let _row = this.spanArr[rowIndex] ? this.spanArr[rowIndex] : 0
if (_row) {
return {
rowspan: _row,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
},