element ui中el-table的合并相同列内容的解决方法，简单实用-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui中el-table的合并相同列内容的解决方法，简单实用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

element ui中el-table的合并相同列内容的解决方法，简单实用废话不说，直接上代码，vue页面中的几个部分如下：注意几点：

1、el-table中写上： :span-method=“objectSpanMethod”
2、两个方法不用改动
3、想合并哪列，在data中columnArr数组里填上列名。
4、如果有bug，自己去调整吧文章来源地址https://www.toymoban.com/news/detail-513883.html

<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); //计算需合并的内容
        });
    },

    // 计算需要合并的单元格
    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 {
            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][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>