表格列的合并

<el-table
          ref="multipleTable"
          :data="tableData"
          border
          fit
          :header-cell-style="{color:'#303133',fontSize:'14px',fontWeight:'normal'}"
          :cell-style="{color:'#303133',fontSize:'14px',fontWeight:'normal'}"
          :span-method="arraySpanMethod"
          style="width:680;"
        >
          <el-table-column
            label="保养种类"
            prop="maintenanceType"
            align="center"
            width="100"
          />
          <el-table-column
            label="保养项目"
            prop="maintenanceProgram"
            align="center"
            width="100"
          />
          <el-table-column
            label="保养机构/部位"
            align="center"
            prop="parts"
            width="160"
          />
          <el-table-column
            label="合格基准"
            align="center"
            prop="qualified"
            width="160"
          />
          <el-table-column
            label="保养结果"
            align="center"
            prop="results"
            width="158"
          />
        </el-table>

　　

<script>
import { deviceMaintenanceCardPrint } from '@/api/vue-deviceMaintenanceCard.js'
export default {
  name: 'MaintenanceCardPrint',
  data() {
    return {
      cardName: '', // 计划名称
      tableData: [],
      needMergeArr: ['maintenanceType', 'maintenanceProgram', 'qualified'], // 有合并项的列
      rowMergeArrs: {} // 包含需要一个或多个合并项信息的对象
    }
  },
  created() {
    this.deviceMaintenanceCardPrint(this.$route.query.id)
  },
  methods: {
    // 设置表头
    getRowClass() {
      return 'background:#F1F6FF;color: rgba(0,0,0,.85);font-weight:400'
    },
    /**
     * 设置样式
     */
    tabRowClassName({ row, rowIndex }) {
      const index = rowIndex + 1
      if (index % 2 === 0) {
        return 'warning-row'
      }
    },
    /**
     * 打印详情页面
     */
    deviceMaintenanceCardPrint(id) {
      deviceMaintenanceCardPrint({
        id: id
      }).then((res) => {
        if (res.code === '0') {
          // 处理数据
          res.data.cardDetail.forEach((item, index) => {
            this.$set(item, 'results', '')
          })
          this.cardName = res.data.cardName // 保养计划名称
          this.tableData = res.data.cardDetail
          this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData) // 处理数据
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    /**
      * @description 实现合并行或列
      * @param row:Object 需要合并的列name 如:'name' 'id'
      * @param column:Object 当前行的行数，由合并函数传入
      * @param rowIndex:Number 当前列的数据，由合并函数传入
      * @param columnIndex:Number 当前列的数据，由合并函数传入
      *
      * @return 函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象
      * 参考地址：https://element.eleme.cn/#/zh-CN/component/table#table-biao-ge
     */
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.needMergeArr.includes(column.property)) return this.mergeAction(column.property, rowIndex, column)
    },
    /**
      * @description 根据数组来确定单元格是否需要合并
      * @param val:String 需要合并的列name 如:'name' 'id'
      * @param rowIndex:Number 当前行的行数，由合并函数传入
      * @param colData:Object 当前列的数据，由合并函数传入
      *
      * @return 返回值为一个数组表示该单元格是否需要合并; 说明: [0,0]表示改行被合并了 [n+,1]n为1时表示该单元格不动,n大于1时表示合并了N-1个单元格
    */
    mergeAction(val, rowIndex, colData) {
      const _row = this.rowMergeArrs[val].rowArr[rowIndex]
      const _col = _row > 0 ? 1 : 0
      return [_row, _col]
    },
    /**
      * @description 根据数组将指定对象转化为相应的数组
      * @param arr:Array[String] 必填 必须是字符串形式的数组
      * @param data:Array 必填 需要转化的对象
      *
      * @return 返回一个对象
      * 例：rowMerge(['name','value'], [{value:'1', name:'小明'}, {value:'2', name:'小明'}, {value:'3', name:'小明'}, {value:'1', name:'小明'}, {value:'1', name:'小明'}])
      * 返回值: {
      *    name:{
      *      rowArr: [5, 0, 0, 0, 0]
      *      rowMergeNum: 0,
      *    },
      *    value: {
      *       rowArr: [1, 1, 1, 2, 0],
      *       rowMergeNum: 3
      *     }
      *   }
    */
    rowMergeHandle(arr, data) {
      if (!Array.isArray(arr) && !arr.length) return false
      if (!Array.isArray(data) && !data.length) return false
      const needMerge = {}
      arr.forEach(i => {
        needMerge[i] = {
          rowArr: [],
          rowMergeNum: 0
        }
        data.forEach((item, index) => {
          if (index === 0) {
            needMerge[i].rowArr.push(1)
            needMerge[i].rowMergeNum = 0
          } else {
            if (item[i] === data[index - 1][i]) {
              needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1
              needMerge[i].rowArr.push(0)
            } else {
              needMerge[i].rowArr.push(1)
              needMerge[i].rowMergeNum = index
            }
          }
        })
      })
      return needMerge
    },
    /**
     * 打印功能展示
     */
    PrintRow() {
      this.$print(this.$refs.print)
    }

  }
}
</script>