Element表格总计展示在第一行

先上效果图:

Element表格总计展示在第一行_第1张图片

实现方法:

没有用饿了么的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...

你可能感兴趣的:(前端,vue.js,element-ui,javascript)