el-table合并多个相同列_element-ui表格table合并二维数组-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_36617251/article/details/129084932

该代码示例展示了如何在Vue.js应用中使用ElementUI的el-table组件，通过处理数据来实现表格行和列的合并。方法包括获取数据、计算需合并的单元格以及设置合并规则。

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

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{
        'text-align': 'center',
        background: '#f6f8fa',
        color: '#333',
      }"
      border
      show-summary
      :span-method="objectSpanMethod"
    >
      <el-table-column label="行号" type="index" width="60"> </el-table-column>
      <el-table-column prop="dotime" label="日期" min-width="110">
      </el-table-column>
      <el-table-column prop="company_name" label="客户名称" min-width="160">
      </el-table-column>
      <el-table-column prop="title" label="跟进标题" min-width="130">
      </el-table-column>
      <el-table-column prop="income" label="收入" min-width="100">
      </el-table-column>
      <el-table-column prop="cost" label="支出" min-width="100">
      </el-table-column>
      <el-table-column prop="user_name" label="经办人" min-width="110">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {},
  data() {
    return {
      tableData: [], //主数据
      //合并表格 列对应的字段
      columnArr: ["dotime", "company_name"],
      spanArr: [], //临时组
      spanData: [], // 组合的合并组
    };
  },
  methods: {
    //获取代理记账的业务
    getDataAccount(obj) {
      this.$api
        .post("/xxx/xxx", {
          uid: this.$store.state.user.user_id,
          obj,
        })
        .then((res) => {
          this.tableData = res.data;

          this.getSpanData(this.tableData); //计算需合并的内容
        });
    },

    // 计算需要合并的单元格,是按照列名竖着一列列构造出的二维数组，
    //2代表合并2行，1代表不合并，0代表直接消失
    getSpanData(data) {
      this.spanData = [];
      this.columnArr.forEach((element) => {
        let contactDot = 0;
        this.spanArr = [];
        data.forEach((item, index) => {
          if (index === 0) {
            this.spanArr.push(1);
          } else {
//如果需要主键id值一样的才合并 
//if (item[element] === data[index - 1][element]&&item['id'] === data[index - 1]['id']) 
            if (item[element] === data[index - 1][element]) {
              this.spanArr[contactDot] += 1;
              this.spanArr.push(0);
            } else {
              contactDot = index;
              this.spanArr.push(1);
            }
          }
        });
        this.spanData.push(this.spanArr);
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.columnArr.includes(column.property)) {
        if (this.spanData[columnIndex]&&this.spanData[columnIndex][rowIndex]) {
          return {
            rowspan: this.spanData[columnIndex][rowIndex],
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
  mounted() {
    this.getDataAccount();
  },
};
</script>

<style lang="scss" scoped>
// scss
</style>