【vue2+elementUI】el |
您所在的位置：网站首页 › 表格合计怎么放在第一行里面显示 › 【vue2+elementUI】el |
【vue2+elementUI】el
|
el-table同时添加小计和合计
效果：
1、在页面绘制表格。el-table使用show-summary可以自动生成一个合计行。代码如下： 表格添加合计和小计 女 男 import { nextTick } from "vue"; export default { data() { return { list: [ { name: "张三", age: 22, gender: "F", phoneNumber: "123456789", birthday: "2001年6月8日", address: "北京市XX区XX路", english_achievements: "95", math_achievements: "98" }, { name: "李四", age: 22, gender: "M", phoneNumber: "123456789", birthday: "2001年6月8日", address: "北京市XX区XX路", english_achievements: "96", math_achievements: "98" }, { name: "张三", age: 22, gender: "F", phoneNumber: "123456789", birthday: "2001年6月8日", address: "北京市XX区XX路", english_achievements: "89", math_achievements: "98" }, { name: "李四", age: 22, gender: "M", phoneNumber: "123456789", birthday: "2001年6月8日", address: "北京市XX区XX路", english_achievements: "95", math_achievements: "98" }, { name: "张三", age: 22, gender: "F", phoneNumber: "123456789", birthday: "2001年6月8日", address: "北京市XX区XX路", english_achievements: "98", math_achievements: "98" }, { name: "李四", age: 22, gender: "M", phoneNumber: "123456789", birthday: "2001年6月8日", address: "北京市XX区XX路", english_achievements: "95", math_achievements: "98" }, { name: "张三", age: 22, gender: "F", phoneNumber: "123456789", birthday: "2001年6月8日", address: "北京市XX区XX路", english_achievements: "95", math_achievements: "98" }, { name: "李四", age: 22, gender: "M", phoneNumber: "123456789", birthday: "2001年6月8日", address: "北京市XX区XX路", english_achievements: "95", math_achievements: "98" }, { name: "张三", age: 22, gender: "F", phoneNumber: "123456789", birthday: "2001年6月8日", address: "北京市XX区XX路", english_achievements: "95", math_achievements: "98" }, { name: "李四", age: 22, gender: "M", phoneNumber: "123456789", birthday: "2001年6月8日", address: "北京市XX区XX路", english_achievements: "95", math_achievements: "98" } ], sumObject: { english_achievements: 1000, math_achievements: 888 } // 合计数据 }; } };2、因为需求是添加两行，一个合计一个小计，并保留两位小数。 小计为当前页面的累加和，合计为接口返回的数据（目前使用的假数据sumObject）。所以使用:summary-method="getSummaries"自定义合计行。 代码如下： methods: { // 合计和小计赋值 getSummaries(param) { const { columns, data } = param; const sums = []; // 保留换行符 选中合计行的每一个元素，然后给每一个元素都添加css样式whiteSpace。 this.$nextTick(() => { const elements = document.querySelectorAll( ".el-table__footer-wrapper div.cell" ); elements.forEach(element => { // whiteSpace用于控制元素内部空白符（包括空格、换行符等）的处理方式。pre-wrap：表示浏览器会保留连续的空白符和换行符，且会自动换行。 element.style.whiteSpace = "pre-wrap"; }); }); // 以下是对小计和总计分别进行赋值 columns.forEach((column, index) => { if (index === 0) { sums[index] = "小计" + "\n" + "总计"; return; } //将当前列的所有值存储到values中 注：非数字会返回NaN。 const values = data.map(item => Number(item[column.property])); // 将要进行小计合计的字段组成一个数组 let label = ["math_achievements", "english_achievements"]; //如果label包含当前column.property，则进行数据处理 if (label.includes(column.property)) { // 小计 let Subtotal = values .reduce((prev, curr) => { const value = Number(curr); // 如果是数字则进行累加 if (!isNaN(value)) { return prev + curr; } else { return prev; } }, 0) .toFixed(2); // 总计 let allTotal = ""; // 总计非0时添加两位小数 if (this.sumObject.hasOwnProperty(column.property)) { // 判断是否是0. 如果this.sumObject[column.property]不是0，则!this.sumObject[column.property]为false。如果是0，则为true。 if (!this.sumObject[column.property]) { allTotal = this.sumObject[column.property]; } else { allTotal = this.sumObject[column.property].toFixed(2); } } sums[index] = Subtotal + "\n" + allTotal; } else { sums[index] = ""; } }); return sums; } }3、css样式如下。 .info_title { text-align: center; margin: 20px 0px; } /deep/ .el-table { overflow: auto; height: 300px; } //将滚动条显示在合计和小计的下方 /deep/ .el-table__body-wrapper, .el-table__footer-wrapper, .el-table__header-wrapper { overflow: visible !important; } // 不显示多余的线条 /deep/ .el-table--border::after, .el-table--group::after, .el-table::before { width: 0px; } //固定表头 /deep/ .el-table__header-wrapper { position: sticky; top: 0; z-index: 999; }如果没有自定义合计和小计，可以直接给el-table加一个:height="数字"，就可以固定表头。 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |