共计 2586 个字符，预计需要花费 7 分钟才能阅读完成。
啰嗦两句
怎么用了这么一个题目呢，是因为我的业务需要就是这样，迫于文笔垃圾且词穷，需要当题目。
业务需要 && 设计原型
业务需要应该不须要说，看设计图，大家应该都很明确啦。那我来简略说一下（唉，皮一下很开心）。表格数据中：
- 第一列合并雷同名称的行，雷同名称数据项数量不固定。
- 增加共计行，共计行名称占据两列单元格，合并居中
- 共计行最初一个单元格，展现自定义内容，本需要中是进度条
设计图如下，我把需要对应标上了
实现
先回顾 element 的合并行或列
很分明了，绑定一个办法，办法中实现咱们的合并行，而咱们需要中要合并的行的数量并不固定，所以不能间接复制官网的例子。
computed: {groupNum() {
// 获取需合并的数据名称
return new Set(this.data.map((o) => o.name));
}
},
methods: {nameGroup(name) {
// 获取雷同名称的长度
return this.getData.filter((o) => o.name == name).length;
},
nameLen(name) {const tmp = Array.from(this.groupNum);
let index = tmp.indexOf(name);
let len = 0;
for (let i = 0; i < index; i++) {len += this.nameGroup(tmp[i]);
}
return len;
},
// 合并列
objectSpanMethod(data) {const { row, column, rowIndex, columnIndex} = data;
if (columnIndex === 0) {
// 依据重名的数据长度，计算合并的单元格长度
const len = this.nameGroup(row.name);
let lenName = this.nameLen(row.name);
if (rowIndex === lenName) {
return {
rowspan: len, // 依据理论反复的名称合并，而不是像官网例子中写死合并 2 行
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
}
}
}到这里，就实现咱们的需要第一项了。上面就是共计行。常规，温习下 element 的共计行
绑定一个 getSummaries 办法，用于自定义共计行的数据展现。
需要 2：“共计”占据两列，合并并居中，这边参考网上实现，从款式上进行解决。暗藏第二列，让第一列 colspan 为 2 并居中。
需要 3：最初一个单元格中搁置进度条。这边我的思考是从理论渲染构造中增加元素。思考到表格存在翻页状况，进度条的值存在变动，所以这块解决放在监听 watch 中。
watch: {
// 共计行的合并单元格
getData: {async handler() {await this.$nextTick(() => {
const tds = document.querySelectorAll("#table .el-table__footer-wrapper tr>td");
tds[0].colSpan = 2;
tds[0].style.textAlign = "center";
tds[1].style.display = "none";
});
},
immediate: true,
},
sums: {async handler() { // 共计行的纠纷转化率
await this.$nextTick(() => {
const tds = document.querySelectorAll("#table .el-table__footer-wrapper tr>td .cell");
tds[4].innerHTML = `
<div class="scale-table">
<div class="plotting-scale" style="height:28px;width:auto">
<div class="plotting-scale-bg">
<div class="plotting-scale-bar" id="bar"></div>
<p class="plotting-scale-text" style="line-height: 28px">${this.sums[4]}%</p>
</div>
</div>
</div>
`;
document.getElementById("bar").style.width = this.sums[4] + "%";
});
},
immediate: true,
deep: true,
},
methods:{
// 共计
getSummaries(param) {const { columns, data} = param;
columns.forEach((column, index) => {if (index === 0) {this.sums[index] = "共计";
return;
}
const values = data.map((item, index) => Number(item[column.property]));
if (index === 2 || index === 3) { // 计算评估总量和生成报告数
if (!values.every((value) => isNaN(value))) {this.sums[index] = values.reduce((prev, curr) => {const value = Number(curr);
if (!isNaN(value)) {return prev + curr;} else {return prev;}
}, 0);
}
} else if (index === 4) { // 计算纠纷转换率
let num1 = 0,
num2 = 0;
data.map((item) => {
num1 += item.num;
num2 += item.report;
});
this.sums[4] = (num2 / num1).toFixed(2) * 100;
}
});
return this.sums;
},
}写完这篇文章当前，我感觉这整块的需要都不是很难，而后理论开发中，我也是推敲很久，网页开了一个又一个，关键词换了一批又一批。还是过于塌实，遇到问题，第一反馈就是搜寻，看看网上有没有现成的代码能够 copy，copy 完了进行下一个需要或者间接就实现我的项目了，没有后续的了解与反思。遇到需要，先剖析，能够不会写，然而要有思路，再逐个实际。加油，共勉！
正文完
