在element的＜el-table＞中对固定列添加合计

疯狂小8

已于 2022-02-16 10:48:09 修改

阅读量830

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js elementui 前端

于 2022-02-16 09:27:45 首次发布

本文链接：https://blog.csdn.net/c12345666/article/details/122956391

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在Element UI的表格组件中添加固定列并实现列的合计功能。通过`summary-method`属性结合`getSummaries`方法，处理了合计值可能被遮挡的问题，并展示了如何根据数据计算指定列的总计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在element的中对固定列添加合计

在中添加

         :summary-method="getSummaries"
          show-summary

添加getSummaries方法

 getSummaries(param) {
      //处理合计被整个table表遮挡问题
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if(column.property === '对应table中需要合计的字段名称'){
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = ' ';
          }
        }else {
          sums[index] = ' ';
        }
      });
      return sums
    }