elementUI table合并单元格和右侧计算

最新推荐文章于 2024-07-04 11:00:03 发布

杂草茹

最新推荐文章于 2024-07-04 11:00:03 发布

阅读量243

点赞数 3

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/qq_40187274/article/details/137599162

版权

本文介绍了如何在Vue.js中使用ElementUI的el-table组件实现表格的行合并功能，并展示了如何通过计算属性计算某一类型的总和。

摘要由CSDN通过智能技术生成

样式

在这里插入图片描述

代码

// An highlighted block
<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="类型" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
      <el-table-column label="合计">
        <template slot-scope="scope">
          {{ getSum(scope.row.id) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
<script>
export default {
  props: {},
  data() {
    return {
      tableData: [
        {
          id: "A320",
          name: "343",
          amount3: 10,
        },
        {
          id: "A320",
          name: "222",
          amount3: 12,
        },
        {
          id: "A320",
          name: "23g",
          amount3: 9,
        },
        {
          id: "A330",
          name: "445",
          amount3: 17,
        },
        {
          id: "A330",
          name: "54M",
          amount3: 15,
        },
        {
          id: "B737",
          name: "44H",
          amount3: 15,
        },
        {
          id: "B737",
          name: "44HG",
          amount3: 15,
        },
      ],
      sums: {},
    };
  },
  computed: {},
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, "column");
      if (columnIndex === 0 || columnIndex === 3) {
        const prevRow = this.tableData[rowIndex - 1];
        //如果存在前一行数据，并且当前行的 id 与前一行的 id 相同，说明需要将当前单元格合并到前一行的单元格,也就是rowspan 0
        if (prevRow && row.id === prevRow.id) {
          return {
            rowspan: 0,
            colspan: 1,
          };
        } else {
        //如果当前行与前一行的 id 不同，则需要统计连续相同 id 的行数，以确定合并的 
          let countRowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData.length; i++) {
            if (this.tableData[i].id === row.id) {
              countRowspan++;
            } else {
              break;
            }
          }
          return {
            rowspan: countRowspan,
            colspan: 1,
          };
        }
      }
    },
    getSum(id) {
      if (!this.sums[id]) {
        this.sums[id] = this.tableData.reduce(
          (total, current) =>
            current.id === id ? total + current.amount3 : total,
          0
        );
      }
      return this.sums[id];
    },
  },
};
</script>
  

<style scoped lang="scss">
/deep/ .el-table__row > td {
  border: 1px solid #f0f0f0 !important;
}
</style>