element-ui跨行

<template>
  <el-table :data="scheduleList" :span-method="objectSpanMethod" border>
    <el-table-column prop="date" label="时间" width="200" />
    <el-table-column prop="journey" label="行程" width="600" />
    <el-table-column prop="lecturer" label="讲师" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      scheduleList: [
        {
          date: "第一天",
          journey: "报道",
          lecturer: "",
        },
        {
          date: "第二天",
          journey: "企业生产安全应急预案数字化推演及复盘",
          lecturer: "国家危化品应急救援基地--林俊",
        },
        {
          date: "第三天",
          journey: "火灾应急处置",
          lecturer: "国家危化品应急救援基地—张学军",
        },
        {
          date: "第三天",
          journey: "中毒窒息事故应急处置",
          lecturer: "中化岙山事故应急处置师资",
        },
        {
          date: "第四天",
          journey: "人员触电事故应急处置",
          lecturer: "中化岙山事故应急处置师资",
        },
        {
          date: "第四天",
          journey: "泄漏事故应急处置",
          lecturer: "中化岙山事故应急处置师资",
        },
        {
          date: "第四天",
          journey: "问题交流",
          lecturer: "中化岙山事故应急处置师资",
        },
        {
          date: "第五天",
          journey: "受限空间作业管理",
          lecturer: "中化岙山危险作业内训师",
        },
        {
          date: "第五天",
          journey: "高处作业管理",
          lecturer: "中化岙山危险作业内训师",
        },
        {
          date: "第五天",
          journey: "动火作业管理",
          lecturer: "中化岙山危险作业内训师",
        },
        {
          date: "第五天",
          journey: "临时用电作业管理",
          lecturer: "中化岙山危险作业内训师",
        },
        {
          date: "第五天",
          journey: "问题交流与讨论",
          lecturer: "中化岙山危险作业内训师",
        },
        {
          date: "第六天",
          journey: "回城",
          lecturer: "",
        },
      ],
      rowIndex: "-1",
      orderIndexArr: [],
    };
  },
  methods: {
      // 获取相同编号的数组
      getNumber() {
        const orderObj = {}
        this.scheduleList.forEach((item, index) => {
          item.indexRow = index
          // 通过date关键字
          if (orderObj[item.date]) {
            orderObj[item.date].push(index)
          } else {
            orderObj[item.date] = []
            orderObj[item.date].push(index)
          }
        });
        // 将数组长度大于1的值 存储到this.orderIndexArr（也就是需要合并的项）
        Object.keys(orderObj).forEach((key) => {
          if (orderObj[key].length > 1) {
            this.orderIndexArr.push(orderObj[key])
          }
        })
      },
      
      // 获取相同编号的数组
      getOrderNumber() {
        const orderObj = {}
        this.scheduleList.forEach((item, index) => {
          item.rowIndex = index
          if (orderObj[item.date]) {
            orderObj[item.date].push(index)
          } else {
            orderObj[item.date] = [];
            orderObj[item.date].push(index)
          }
        })
        // 将数组长度大于1的值 存储到this.orderIndexArr（也就是需要合并的项）
        Object.keys(orderObj).forEach((key) => {
          if (orderObj[key].length > 1) {
            this.orderIndexArr.push(orderObj[key])
          }
        });
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          for (let i = 0; i < this.orderIndexArr.length; i += 1) {
            let element = this.orderIndexArr[i];
            for (let j = 0; j < element.length; j += 1) {
              let item = element[j];
              if (rowIndex === item) {
                if (j === 0) {
                  return {
                    rowspan: element.length,
                    colspan: 1
                  }
                }
                if (j !== 0) {
                  return {
                    rowspan: 0,
                    colspan: 0
                  }
                }
              }
            }
          }
        }
      },
  },
  mounted() {
    this.getOrderNumber()
  }
}
</script>