动态创建elementUI表格合计行
程序员文章站
2022-03-04 11:34:23
...
elementui加上合计行非常简单,在表格组件上,将show-summary设置为true就会在表格尾部展示合计行。定义自己的合计逻辑,使用summary-method并传入一个方法,返回一个数组,这个数组中的各项就会显示在合计行的各列中。
<el-table ref="table"
show-summary
:summary-method="summaryMethod">
// 合计行
summaryMethod(param) {
let that = this;
const { columns, data } = param;
const sums = [];
let arr = []; //合计行数组
columns.forEach((column, index) => {
//处理合计行数组
//that.summaryList是表格需要进行合计行的具体字段
that.summaryList.forEach(item => {
if (column.property == item) arr.push(`${item}`);
});
if (index === 0) {
sums[index] = "合计";
return;
}
//that.$util.delcommafy将值转化成number类型,方便做计算
const values = data.map(
item => that.$util.delcommafy(item[column.property]) * 1
);
if (arr.includes(column.property)) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
//金额字段数组
that.amountList.map(stuff => {
// 加上金额千位分隔符
if (column.property == stuff){
sums[index] = that.$util.fmtMoney(sums[index], 2);
}
});
} else {
sums[index] = "--";
}
});
return sums;
},
上一篇: ElementUi rules表单验证
推荐阅读
-
我用ASP写的m行n列的函数,动态输出创建TABLE行列
-
在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript
-
jquery动态增加删除表格行的小例子
-
jQuery实现动态生成表格并为行绑定单击变色动作的方法
-
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
-
vue+element创建动态的form表单.以及动态生成表格的行和列
-
【转载】C#的DataTable使用NewRow方法创建新表格行
-
jQuery ajax 动态append创建表格出现不兼容ie8
-
JQuery实现动态表格点击按钮表格增加一行
-
JQuery实现表格动态增加行并对新行添加事件