element 表格合并

效果如图 前两列合并

1.启用函数:

span-method="objectSpanMethod"

2.创建存储合并行的数组

      item1:[],//存放合并行数据
      item2:[],//存放合并行数据

数据类型 data[]为表格数据

3.处理合并数据

  updated: function () {
    let itemDot1 = 0;
    let itemDot2 = 0;
    let item1 = [];
    let item2 = [];
    this.data.forEach((item, index) => {
      if (index === 0) {//第一行
        item1.push(1)
        item2.push(1)
      } else {
        //第一列
        if (item.id === this.data[index - 1].id) {// // 判断当前元素与上一个元素是否相同 data为表格数据对象  id为合并列字段
          item1[itemDot1] += 1;
          item1.push(0)
        } else {
          itemDot1 = index
          item1.push(1)
        }
        //第二列
        if (item.id === this.data[index - 1].id && item.plate === this.data[index - 1].plate) {
          item2[itemDot2] += 1;
          item2.push(0)
        } else {
          itemDot2 = index
          item2.push(1)
        }
      }
    })
    this.item1 = item1;
    this.item2 = item2;
  },

4.合并表格

    //合并表格
    objectSpanMethod:function ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 第一列的合并方法
        const row1 = this.item1[rowIndex];
        const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row1,
          colspan: col1,
        };

      } else if (columnIndex === 1) {
        // 第二列的合并方法
        const row2 = this.item2[rowIndex];
        const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row2,
          colspan: col2,
        };
      }

    },

全部代码

<template>
  <basic-container>
    <avue-crud
      :option="option"
      :span-method="objectSpanMethod"
      :table-loading="loading"
      :data="data"
      :page="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"

      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >

      <template slot-scope="scope" slot="rangeDateSearch">
        <el-date-picker v-model="query.rangeDate" type="daterange" size="mini" value-format="yyyy-MM-dd" range-separator="-"></el-date-picker>
      </template>

      <!--列表导航操作-->
      <template slot="menuLeft">
        <el-button size="small" type="warning"  @click="excel2" icon="el-icon-document">导出excel</el-button>
      </template>

    </avue-crud>
  </basic-container>

</template>

<script>
import {
  getList,excel2
} from "@/api/cash/finalPrintExcel";
import {getCurrentMonthFirstDay, getCurrentMonthLastDay} from "@/util/date";
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      item1:[],//存放合并行数据
      item2:[],//存放合并行数据

      form: {},
      query: {
        dateStart: '',
        dateEnd: '',
        rangeDate: [getCurrentMonthFirstDay(), getCurrentMonthLastDay()],
      },
      loading: true,
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        height: "auto",
        menuWidth: 120,
        tip: false,
        border: true,
        menu: false,
        viewBtn: false,
        editBtn: false,
        addBtn: false,
        delBtn: false,
        cellBtn: false,
        printBtn: true,
        headerAlign: "center",
        searchMenuSpan: 6,
        align: "center",
        title:'运输结算单',
        column: [
          {
            label: "单号",
            prop: "id",
          },
          {
            label: "车号",
            prop: "plate",
          },
          {
            label: "类型",
            prop: "flag",
          },

          {
            label: "明细",
            prop: "flowType",
          },
          {
            label: "金额",
            prop: "amount",
          },

        ]
      },
      data: []
    };
  },

  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {};
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },

  updated: function () {
    let itemDot1 = 0;
    let itemDot2 = 0;
    let item1 = [];
    let item2 = [];
    this.data.forEach((item, index) => {
      if (index === 0) {//第一行
        item1.push(1)
        item2.push(1)
      } else {
        //第一列
        if (item.id === this.data[index - 1].id) {// // 判断当前元素与上一个元素是否相同 data为表格数据对象  id为合并列字段
          item1[itemDot1] += 1;
          item1.push(0)
        } else {
          itemDot1 = index
          item1.push(1)
        }
        //第二列
        if (item.id === this.data[index - 1].id && item.plate === this.data[index - 1].plate) {
          item2[itemDot2] += 1;
          item2.push(0)
        } else {
          itemDot2 = index
          item2.push(1)
        }
      }
    })
    this.item1 = item1;
    this.item2 = item2;
  },
  methods: {

    //合并表格
    objectSpanMethod:function ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 第一列的合并方法
        const row1 = this.item1[rowIndex];
        const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row1,
          colspan: col1,
        };

      } else if (columnIndex === 1) {
        // 第二列的合并方法
        const row2 = this.item2[rowIndex];
        const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row2,
          colspan: col2,
        };
      }

    },

    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      params.dateStart = this.query.dateStart;
      params.dateEnd = this.query.dateEnd;
      params.rangeDate = this.query.rangeDate;
      done();
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange(page) {
      this.onLoad(page);
    },
    onLoad(page, params = {}) {
      this.loading = true;

      if (this.query.rangeDate.length == 2) {
        this.query.dateStart = this.query.rangeDate[0];
        this.query.dateEnd = this.query.rangeDate[1];
      } else {
        this.$message.error("请先选择时间范围");
        return;
      }

      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();

      });
    },

    excel2() {
      excel2();
    },

  }

}
</script>

<style>
.avue-crud__title {margin-left: 45%}
</style>