elementUi表格合并

<template>

  <div class="content-body">

    <div

      style="

        height: calc(100% - 30px);

        border-radius: 8px;

        box-sizing: border-box;

        overflow: hidden;

      "

    >

      <el-table

        :data="tableData"

        :span-method="objectSpanMethod"

        style="width: 100%; margin-top: 20px border-radius: 8px; height: calc(100% - 60px);width: 100%;"

        header-cell-class-name="header-cell-class"

        :cell-style="rowClass"

        @cell-mouse-leave="cellMouseLeave"

        @cell-mouse-enter="cellMouseEnter"

        border

        :row-class-name="tableRowClassName"

      >

        <el-table-column sortable type="selection"></el-table-column>

        <el-table-column

          label="序号"

          prop="Nosort"

          width="60px"

        ></el-table-column>

        <el-table-column label="作业类型" prop="workTypeName"></el-table-column>

        <el-table-column label="作业级别" prop="dictLabel"> </el-table-column>

      </el-table>



      <div

        style="height:60px;background-color: #fff;display: flex;justify-content: flex-end;align-items: center;padding-right: 100px;"

      >

        <el-pagination

          :page-sizes="[10, 20, 30, 40, 50, 100, 200]"

          layout="total, sizes, prev, pager, next, jumper"

        >

        </el-pagination>

      </div>

    </div>

  </div>

</template>



<script>

export default {

  name: "",

  data() {

    return {

      // 表格数据

      tableData: [],

      OrderIndexArr: [],

      hoverOrderArr: [],

      rowIndex: "-1",

      spanMethodOption: []

    };

  },

  created() {

    this._typeAndLevel();

    this.getOrderNumber();

  },

  methods: {

    // 表格数据居中

    rowClass() {

      return "text-align:center";

    },

    _typeAndLevel() {

      setTimeout(() => {

        let arr = [];

        this.$store.state.taskdictMapData.work_type.forEach(item => {

          if (item.children !== null) {

            item.children.forEach(v => {

              let obj = {

                dictLabel: v.dictLabel,

                dictValue: v.dictValue,

                dictId: v.dictId,

                workTypeName: item.dictLabel,

                typeId: item.dictId

              };

              arr.push(obj);

            });

          } else {

            arr.push(item);

          }

        });

        this.tableData = arr;

      }, 10);

    },



    // 合并单元格

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {

      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {

        for (let i = 0; i < this.OrderIndexArr.length; i++) {

          let element = this.OrderIndexArr[i];

          for (let j = 0; j < element.length; j++) {

            let item = element[j];

            if (rowIndex == item) {

              if (j == 0) {

                return {

                  rowspan: element.length,

                  colspan: 1

                };

              } else if (j != 0) {

                return {

                  rowspan: 0,

                  colspan: 0

                };

              }

            }

          }

        }

      }

    },



    tableRowClassName({ row, rowIndex }) {

      let rowArr = [];

      let arr = this.hoverOrderArr;

      for (let i = 0; i < arr.length; i++) {

        if (rowIndex == arr[i]) {

          return "hovered-row";

        }

      }

      this.tableData.forEach(item => {

        if (!this.spanMethodOption.includes(item.workTypeName)) {

          this.spanMethodOption.push(item.workTypeName);

        }

      });

      this.spanMethodOption.forEach((item, index) => {

        if (row.workTypeName == item) {

          if (index % 2 === 0) {

            rowArr.push("cell-base");

          } else {

            rowArr.push("cell-even");

          }

        }

      });

      return rowArr;

    },



    cellMouseEnter(row, column, cell, event) {

      this.rowIndex = row.rowIndex;

      this.hoverOrderArr = [];

      this.OrderIndexArr.forEach(element => {

        if (element.indexOf(this.rowIndex) >= 0) {

          this.hoverOrderArr = element;

        }

      });

    },

    cellMouseLeave(row, column, cell, event) {

      this.rowIndex = "-1";

      this.hoverOrderArr = [];

    },

    getOrderNumber() {

      setTimeout(() => {

        let OrderObj = {};

        this.tableData.forEach((element, index) => {

          element.rowIndex = index;

          if (OrderObj[element.workTypeName]) {

            OrderObj[element.workTypeName].push(index);

          } else {

            OrderObj[element.workTypeName] = [];

            OrderObj[element.workTypeName].push(index);

          }

        });

        // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）

        let Nosort = 1;



        this.tableData.forEach((v, i) => {

          if (i == 0) {

            v.Nosort = Nosort;

          }

          if (i > 0) {

            if (v.workTypeName == this.tableData[i - 1].workTypeName) {

              v.Nosort = Nosort;

            } else {

              Nosort += 1;

              v.Nosort = Nosort;

            }

          }

        });

        for (let k in OrderObj) {

          this.OrderIndexArr.push(OrderObj[k]);

        }

      }, 100);

    }

  }

};

</script>