文章来源地址https://www.toymoban.com/news/detail-525020.html
<template>
<el-table :data="tableData" border max-height="800" :span-method="objectSpanMethod">
<el-table-column type="index" width="50">
</el-table-column>
<el-table-column prop="id" label="id" width="150"></el-table-column>
<el-table-column prop="cloudTypeName" label="资质证书编号" width="200"></el-table-column>
<el-table-column prop="accName" label="资质名称" width="250"></el-table-column>
<el-table-column prop="crashAmount" label="发证日期" width="130"></el-table-column>
<el-table-column prop="creditAmount" label=" 发证有效期" width="130"></el-table-column>
<el-table-column prop="availaleAmount" label=" 发证机关" width="178"></el-table-column>
</el-table>
</template>
<script>
export default {
name: 'demo',
data() {
return {
tableData: [
{
id: 1,
cloudTypeName: "阿里云",
accName: "glodon_gm1",
crashAmount: 0.1,
creditAmount: 240000.0,
availaleAmount: 83548.66,
},
{
id: 2,
cloudTypeName: "阿里云",
accName: "glodon_gm1",
crashAmount: 0.0,
creditAmount: 150000.0,
availaleAmount: 83548.66,
},
{
id: 3,
cloudTypeName: "阿里云",
accName: "glodon_gm1",
crashAmount: 0.0,
creditAmount: 150000.0,
availaleAmount: 53045.89,
},
{
id: 4,
cloudTypeName: "阿里云",
accName: "glodon_gm4",
crashAmount: 0.0,
creditAmount: 1351000.0,
availaleAmount: 1244354.9,
},
{
id: 5,
cloudTypeName: "阿里云",
accName: "glodon_gm4",
crashAmount: 0.0,
creditAmount: 0.0,
availaleAmount: -5033739.0,
},
{
id: 5,
cloudTypeName: "阿里云",
accName: "glodon_gm5",
crashAmount: 0.0,
creditAmount: 0.0,
availaleAmount: -5033739.0,
},
{
id: 5,
cloudTypeName: "阿里云",
accName: "glodon_gm5",
crashAmount: 0.0,
creditAmount: 0.0,
availaleAmount: -5033739.0,
},
],
// 那个字段写在前面就以哪个为开始，
needMergeArr: ["cloudTypeName","accName", "crashAmount", "creditAmount"],
rowMergeArrs: [],
}
},
mounted() {
this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData);
console.log('数据', this.rowMergeArrs)
},
methods: {
rowMergeHandle(arr, data) {
if (!Array.isArray(arr) && !arr.length) return false;
if (!Array.isArray(data) && !data.length) return false;
let needMerge = {};
arr.forEach((i, idx) => {
needMerge[i] = {
rowArr: [],
rowMergeNum: 0,
};
if (idx == 0) {
data.forEach((item, index) => {
// 表格首个数据单独处理
if (index === 0) {
needMerge[i].rowArr.push(1);
needMerge[i].rowMergeNum = 0;
} else {
if (item[i] === data[index - 1][i]) {
needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
needMerge[i].rowArr.push(0);
} else {
needMerge[i].rowArr.push(1);
needMerge[i].rowMergeNum = index;
}
}
});
} else {
let firstRowArr = needMerge[arr[0]].rowArr;
let firstRowArrDeal = [];
firstRowArr.forEach((item, index) => {
if (item > 0) {
firstRowArrDeal.push(index);
}
});
data.forEach((item, index) => {
let sign = false;
if (firstRowArrDeal.indexOf(index) > 0) {
needMerge[i].rowMergeNum = index;
sign = true;
}
// 表格首个数据单独处理
if (index === 0) {
needMerge[i].rowArr.push(1);
needMerge[i].rowMergeNum = 0;
} else {
if (item[i] === data[index - 1][i]) {
if (sign) {
needMerge[i].rowArr.push(1);
} else {
needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
needMerge[i].rowArr.push(0);
}
} else {
needMerge[i].rowArr.push(1);
needMerge[i].rowMergeNum = index;
}
}
});
}
});
return needMerge;
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
for (let res in this.needMergeArr) {
if (this.needMergeArr[res] == column.property) {
return this.mergeAction(column.property, rowIndex, columnIndex);
}
}
},
mergeAction(val, rowIndex) {
let _row = this.rowMergeArrs[val].rowArr[rowIndex];
let _col = _row > 0 ? 1 : 0;
return [_row, _col];
},
}
}
</script>
<style scoped></style>
文章来源：https://www.toymoban.com/news/detail-525020.html
到了这里，关于vue2+elementUI表格实现实现多列动态合并的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
