ElementUI - elTable 将指定列相同的数据进行跨行合并

最新推荐文章于 2025-02-14 11:24:35 发布

Hi-郑郑

最新推荐文章于 2025-02-14 11:24:35 发布

阅读量496

点赞数 2

文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/Hi_ZH/article/details/144444196

版权

注意：

1、el-table中写上： :span-method=“objectSpanMethod”

2、两个方法不用改动

3、想合并哪列，在data中columnArr数组里填上列名。

4、可能会有bug具体看生成结果

<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 prop="dotime" label="日期" min-width="110" />
      <el-table-column prop="company_name" label="客户名称" min-width="160" />
      <el-table-column prop="title" label="跟进标题" min-width="130" />
      <el-table-column prop="income" label="收入" min-width="100" />
      <el-table-column prop="cost" label="支出" min-width="100" />
      <el-table-column prop="user_name" label="经办人" min-width="110" />
    </el-table>
  </div>
</template>
<script>
export default {
  name: "index",
  props: {},
  data() {
    return {
      tableData: [], //主数据
      //合并表格
      columnArr: ["", "dotime", "company_name"],
      spanArr: [], //临时组
      spanData: [], // 组合的合并组
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    //获取代理记账的业务
    getList() {
      this.$api.post('/xxx/xxx', {})
        .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,
          };
        }
      }
    },
  }
};
</script>

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