el-table合计以及---合计行的合并

最新推荐文章于 2025-03-29 14:24:59 发布

口袋里的神奇宝贝

最新推荐文章于 2025-03-29 14:24:59 发布

阅读量5k

点赞数 6

分类专栏： vue+element 文章标签： vue elementui

本文链接：https://blog.youkuaiyun.com/weixin_45598686/article/details/119250070

版权

vue+element 专栏收录该内容

4 篇文章

订阅专栏

话不多说直接贴代码----效果图

在这里插入图片描述

<template>
  <div style='height: 800px;width: 100%;background: #fff;'>
    <el-table  ref="table" border :data="tableData" :span-method="objectSpanMethod" stripe class="table-class" show-summary :summary-method="getNodeSummaries" highlight-current-row>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="name" label="名字" align="center" />
      <el-table-column prop="sex" label="性别" width="120" align="center" />
      <el-table-column prop="tiZh" label="体重" width="120" align="center" />
      <el-table-column prop="num1" label="数学" width="120" align="center" />
      <el-table-column prop="num2" label="英语" width="120" align="center" />
      <el-table-column prop="num3" label="语文" width="120" align="center" />
    </el-table>
  </div>
</template>

<script>
// import { ref } from 'vue'
export default {
  name: 'aaaa',
  components: {},
  props: {},
  data() {
    return {
      tableData: [
        {       
          name: '张三',
          sex: '男',
          tiZh: 120,
          num1: 1000,
          num2: 2000,
          num3: 3000
        },{       
          name: '张四',
          sex: '女',
          tiZh: 120,
          num1: 1000,
          num2: 2000,
          num3: 3000
        },
      ],
    }
  },
  computed: {},
  mounted() {},
  methods: {
    objectSpanMethod() {
      this.$nextTick(x => {
      if (this.$refs.table.$el) {
          var current = this.$refs.table.$el
            .querySelector(".el-table__footer-wrapper")
            .querySelector(".el-table__footer");
          var cell = current.rows[0].cells;
          cell[0].style.display = "none";
          cell[1].style.display = "none";
          cell[2].style.display = "none";
          cell[3].classList.remove('is-left')
          cell[3].colSpan = "4";
        }
      })
    },
    getNodeSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      let arr = [ 'num1', 'num2', 'num3']
      columns.forEach((column, index) => {
        if (index === 3) {
          sums[index] = "合计";
          return;
        }
        if (arr.some(x => column.property === x)) {
          sums[index] = 0;
          data.map((item) => {
            console.log(item)
            let num = item[column.property];
            // num = num ? parseFloat(num.replace(/,/gi, "")) : 0;
            sums[index] = this.accAdd(sums[index], num);
          });
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
    accAdd(arg1, arg2) {
      let r1, r2, m;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      return ((arg1 * m + arg2 * m) / m).toFixed(2);
    },
  }
}
</script>

<style lang='scss' scoped>
  .table-class{
    width: 50%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>