elementUI table组件合计方法

最新推荐文章于 2025-04-14 09:29:19 发布

晏金煜

最新推荐文章于 2025-04-14 09:29:19 发布

阅读量5.1k

点赞数 2

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

本文链接：https://blog.youkuaiyun.com/qq_36423639/article/details/105221131

版权

element 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Element UI的Table组件中实现对合计列的过滤，通过示例展示具体操作步骤，帮助前端开发者理解并应用到Vue.js项目中。

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

合计方法过滤掉不需要显示的合计列

/**
 * 合计方法  
 * param  为elementUI table组件合计方法获取的参数param
 * arr  传入不需要显示合计的列表字段
 */
export function getSummaries (param, arr = []) {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计';
      return;
    };
    let bor = true;
    if (arr.length > 0 && (arr.find(item => item == column.property) != undefined)) {
      bor = false
    };
    const values = data.map(item => Number(item[column.property]));
    if (!values.every(value => isNaN(value)) && bor) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return Number(prev) + Number(curr);
        } else {
          return Number(prev);
        }
      }, 0);
    } else {
      sums[index] = '';
    }
  });
  return sums;
}

例子如下

html

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<div id="app">
<template>
  <el-table :data="tableData" border show-summary style="width: 100%">
    <el-table-column prop="id" label="ID" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="amount1" label="数值 1"></el-table-column>
    <el-table-column prop="amount2" label="数值 2"></el-table-column>
    <el-table-column prop="amount3" label="数值 3"></el-table-column>
  </el-table>
</template>
</div>

var Main = {
  data() {
    return {
      tableData: [
        { id: '12987122', name: '王小虎', amount1: '234', amount2: '3.2', amount3: 10 },
        { id: '12987123', name: '王小虎', amount1: '165', amount2: '4.43', amount3: 12 }, 
        { id: '12987124', name: '王小虎', amount1: '324', amount2: '1.9', amount3: 9 }, 
        { id: '12987125', name: '王小虎', amount1: '621', amount2: '2.2', amount3: 17 }, 
        { id: '12987126', name: '王小虎', amount1: '539', amount2: '4.1', amount3: 15 }
      ]
     };
  },
  methods: {
    getSummarie(param) {
      return this.getSummaries(param,['amount1'])
    },
    getSummaries (param, arr = []) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        };
        let bor = true;
        //判断是否存在不需要合计的列
        if (arr.length > 0 && (arr.find(item => item == column.property) != undefined)) {
          bor = false
        };
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value)) && bor) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return Number(prev) + Number(curr);
            } else {
              return Number(prev);
            }
          }, 0);
        } else {
          sums[index] = '';
        }
      });
      return sums;
    }
  }
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')