【无标题】element ui span-method合并行或列的方法

原文：https://www.jianshu.com/p/6067708bd1ee

<template>
  <div class="app-container">
    异常数据页面
    <div>
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%"
        @cell-click="handle"
      >
        <el-table-column prop="staid" key="5" label="staID" width="180">
        </el-table-column>
        <el-table-column prop="revid" label="revid"> </el-table-column>
        <el-table-column
          prop="amount1"
          sortable
          label="数值 1"
        ></el-table-column>
        <el-table-column
          prop="amount2"
          sortable
          label="数值 2"
        ></el-table-column>
        <el-table-column
          prop="amount3"
          sortable
          label="数值 3"
        ></el-table-column>
        <el-table-column
          prop="badTime"
          sortable
          label="变好时间"
        ></el-table-column>
        <el-table-column
          prop="goodTime"
          sortable
          label="变坏时间"
        ></el-table-column>
      </el-table>
    </div>
    <abno-table ref="abnoTable" :list-data="listData"></abno-table>
  </div>
</template>

<script>
// 下拉
import AbnoTable from './components/AbnoTable'

export default {
  components: { AbnoTable },
  data () {
    return {
      listData: {},
      spanArr: [],//用于存放每一行记录的合并数
      pos:'',//spanArr的索引。
      tableData: [{
        staid: 25,
        revid: 1,
        amount1: 50,
        amount2: 60,
        amount3: 10,
        badTime: "2022-03-01 20:03:45",
        goodTime: "2022-03-01 20:03:45",
        sum: 70
      }, {
        staid: 25,
        revid: 1,
        amount1: 50,
        amount2: 60,
        amount3: 10,
        badTime: "2022-03-01 20:03:45",
        goodTime: "2022-03-01 20:03:45",
        sum: 70
      }, {
        staid: 25,
        revid: 1,
        amount1: 50,
        amount2: 60,
        amount3: 10,
        badTime: "2022-03-01 20:03:45",
        goodTime: "2022-03-01 20:03:45",
        sum: 70
      }, {
        staid: 25,
        revid: 1,
        amount1: 50,
        amount2: 60,
        amount3: 10,
        badTime: "2022-03-01 20:03:45",
        goodTime: "2022-03-01 20:03:45",
        sum: 70
      }, {
        staid: 25,
        revid: 1,
        amount1: 50,
        amount2: 60,
        amount3: 10,
        badTime: "2022-03-01 20:03:45",
        goodTime: "2022-03-01 20:03:45",
        sum: 70
      }, {
        staid: 24,
        revid: 5,
        amount1: 50,
        amount2: 60,
        amount3: 10,
        badTime: "2022-03-01 20:03:45",
        goodTime: "2022-03-01 20:03:45",
        sum: 70
      }, {
        staid: 24,
        revid: 5,
        amount1: 50,
        amount2: 60,
        amount3: 10,
        badTime: "2022-03-01 20:03:45",
        goodTime: "2022-03-01 20:03:45",
        sum: 70
      }]
    }
  },
  computed: {

  },
  created () {

  },
  mounted: function() {
    this.getSpanArr(this.tableData);
  },
  methods: {
    // arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
    //   if (columnIndex === 0) {
    //     if (rowIndex % 2 === 0) {
    //       return {
    //         rowspan: 2,
    //         colspan: 1
    //       };
    //     } else {
    //       return {
    //         rowspan: 0,
    //         colspan: 0
    //       };
    //     }
    //   }
    // },


    //计算下标的方法
    getSpanArr (data) {
      // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].staid === data[i - 1].staid) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    // 合并的方法
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log(`rowspan:${_row} colspan:${_col}`);
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        };
      }
    },
    handle (row, column, cell, event) {
      this.$refs.abnoTable.dialogTableVisible = true
      this.listData.yichangId = row.id
      this.listData.typede = column.property
      console.log(column.key)
      console.log(this.listData)
      console.log(row)
      console.log(column)
      console.log(cell)
      console.log(event)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>