需要实现如下效果
饿了么ui原生的合并单元格好像不完美,上图是项目中需要的效果,完全使用饿了么提供的方法实现不了!需要改成如下代码:
将表头数据和单元格数据动态获取
定义变量和父传子值
合并单元格的方法:
classifyName为需要合并的单元格的字段
inducatorName为需要合并单元格右边的第一个字段(为啥要操作inducatorName我也不懂)
该子组件(表格)在父组件中显示的标签
在父组件中调用子组件的方法:
this.$refs.myChild.merge();
需要注意的是要放在promise里执行(异步)
子组件中的详细代码如下:
merge() {
let OrderObj = {};
let scoreObj = {};
this.profitability.forEach((element, index) => {
element.rowIndex = index;
if (OrderObj[element.classifyName]) {
let nextItem = this.profitability[index + 1]
? this.profitability[index + 1].classifyName
: undefined;
let prevItem = this.profitability[index - 1].classifyName
? this.profitability[index - 1].classifyName
: undefined;
if (element.classifyName === nextItem) {
OrderObj[element.classifyName].push(index);
} else if (element.classifyName === prevItem) {
OrderObj[element.classifyName].push(index);
}
} else {
OrderObj[element.classifyName] = [];
OrderObj[element.classifyName].push(index);
}
if (scoreObj[element.inducatorName]) {
let nextPro = this.profitability[index + 1]
? this.profitability[index + 1].inducatorName
: undefined;
let prevPro = this.profitability[index - 1].inducatorName
? this.profitability[index - 1].inducatorName
: undefined;
if (element.inducatorName === nextPro) {
scoreObj[element.inducatorName].push(index);
} else if (element.inducatorName === prevPro) {
scoreObj[element.inducatorName].push(index);
}
} else {
scoreObj[element.inducatorName] = [];
scoreObj[element.inducatorName].push(index);
}
});
// 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
for (let k in OrderObj) {
if (OrderObj[k].length > 1) {
this.OrderIndexArr.push(OrderObj[k]);
}
}
for (let i in scoreObj) {
if (scoreObj[i].length > 1) {
this.handleData(scoreObj[i]);
}
}
},
handleData(data) {
let temp = data;
let itemArr = [];
let itemArrNew = [];
// eslint-disable-next-line no-unused-vars
let resArr = [];
if (data.length > 2) {
for (let i = 0; i < data.length; i++) {
if (data[i + 1]) {
if (data[i + 1] - data[i] > 1) {
itemArr = data.slice(0, i + 1);
itemArrNew = temp.slice(i + 1, temp.length);
break;
} else {
resArr = data;
}
}
}
if (itemArr.length > 0 || itemArrNew.length > 0) {
this.scoreArr.push(itemArr);
this.scoreArr.push(itemArrNew);
} else {
this.scoreArr.push(data);
}
} else {
this.scoreArr.push(data);
}
},
objectSpanMethod({ row, rowIndex, column, columnIndex }) {
if (columnIndex === 0) {
for (let i = 0; i < this.OrderIndexArr.length; i++) {
let element = this.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 if (j !== 0) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
}
if (columnIndex === 1) {
for (let j = 0; j < this.scoreArr.length; j++) {
let element = this.scoreArr[j];
for (let k = 0; k < element.length; k++) {
let item = element[k];
if (rowIndex === item) {
if (k === 0) {
return {
rowspan: element.length,
colspan: 1
};
} else if (k !== 0) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
}
}
父组件中的代码:
注意this.$refs.myChild.merge();要放在promise的then里执行
initReport() {
return new Promise((resolve, reject) => {
resultReport(this.reportForm).then(res => {
res = res.data;
if (res.code === 0 && res.data.assetQualityStatusList) {
this.profitabilityData = res.data.profitabilityStatusList;
this.propertyData = res.data.assetQualityStatusList;
this.debtData = res.data.debtRiskProfileList;
this.businessData = res.data.businessGrowthList;
this.titleData = res.data.title;
// console.log("t", this.titleData);
this.evaluateObj = res.data.evaluate;
}
setTimeout(() => {
this.loading = false;
}, 800);
resolve();
});
}).then(() => {
this.$refs.myChild.merge();
this.$refs.myChild2.merge();
this.$refs.myChild3.merge();
this.$refs.myChild4.merge();
});
}
