关于前端:Element表格总计展示在第一行

先上效果图:

实现办法:

没有用饿了么的summary-method办法,因为这个办法只能增加在最初一行。我把summary-method提出来改了下,把办法返回的数组改成了和表格数据一样的key:value格局,而后用unshift插入到第一行。

sum(data) {
   if (data.length > 0) {
     let keys = Object.keys(data[0])
     const sums = {};
     keys.forEach((column, index) => {
         let property = column
         if (index === 0) {
            sums[column] = '总价';
            return;
          }
          const values = data.map(item => Number(item[column]));
          //验证每个value值是否是数字,如果是执行if
          if (!values.every(value => isNaN(value))) {
                sums[column] = values.reduce((prev, curr) => {
                  return prev + curr;
                }, 0);
                sums[column] += ' 元';
              } else {
                sums[column] = 'N/A';
              }
              if (keys[keys.length - 1] === column) {
                data.unshift(sums);
              }
            });
          }
        }

data是须要计算总和的数据,翻页也是能够用sum办法,只有分页后拿到的表格数据传给sum即可,须要留神的是如果有排序的话排序的办法须要另写,不能间接用饿了么的sortable,不然会把总和的数据也进行排序

demo代码

git地址
https://github.com/liguangshu…

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理