Bootstrap

elementUI Table的行合并通用方法

前言:
有些业务需求是需要table进行行合并的,下面根据其他博客的方法整理了下通用方法,如下:
通用方法:

/**在工具类util.js中定义通用方法
 *  table合并行通用 */
// eslint-disable-next-line space-before-function-paren
export default mergeTableRow(config) {
  let data = config.data
  const {
    mergeColNames, // 需要合并的列
    firstMergeColNames, // 受影响的列
    firstMerge // 以哪列为基础进行合并(基准列)
  } = config
  if (!mergeColNames || mergeColNames.length === 0) {
    return data
  }
  mergeColNames.forEach((m) => {
    const mList = {}
    data = data.map((v, index) => {
      // 区分需要合并行的key值
      const rowVal = v[firstMerge] + '-' + v[m]
      // 需要合并行的第二行以及之后行会走if
      // m === firstMerge 判断需要合并的列是否是基准列,如果是则只满足前面的条件,如果不是则需满足前面+后面的条件
      if (mList[rowVal] && mList[rowVal].newIndex === index && (m === firstMerge ? true : data[index][firstMerge + '-span'].rowspan === 0)) {
        // 判断受影响的列是否是需要合并的列
        const flag = firstMergeColNames.filter((f) => {
          return f === m
        }).length !== 0
        // 判断需要合并的列是否是基准列
        const mcFlag = mergeColNames.filter((mc) => {
          return mc === firstMerge
        }).length === 0
        // 判断基准列只有一行的时候,直接赋值rowspan和colspan为1
        if ((mcFlag && flag) || (flag && data[index][firstMerge + '-span'] && data[index][firstMerge + '-span'].rowspan === 1)) {
          v[m + '-span'] = {
            rowspan: 1,
            colspan: 1
          }
        } else {
          // 判断基准列或其他需要合并列有多行时,第一行rowspan++
          data[mList[rowVal]['index']][m + '-span'].rowspan++
          // 需要合并行除了第一行之后其他行设置rowspan和colspan为0
          v[m + '-span'] = {
            rowspan: 0,
            colspan: 0
          }
          mList[rowVal]['num']++
          mList[rowVal]['newIndex']++
        }
      } else { // 需要合并列第一行走else
        mList[rowVal] = {
          num: 1,
          index: index,
          newIndex: index + 1
        }
        v[m + '-span'] = {
          rowspan: 1,
          colspan: 1
        }
      }
      return v
    })
  })
  return data
}

调用方式:
1,首先需要在el-table中加入方法:span-method=‘objectSpanMethod’

 <el-table 
        :data="tableData" 
        style="width: 100%"
        class="tableBox"
        :span-method='objectSpanMethod'
        :cell-style="changeCellStyle">
      <!-- <el-table-column label="入库编号" type="index" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ (scope.$index + 1).toString().padStart(2, "0") }}</span>
        </template>
      </el-table-column> -->
      <!-- 普通列 -->
      <el-table-column
        prop="purchaseDate"
        label="入库时间"
        min-width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="articleTypeName"
        label="物品类型"
        min-width="150"
        align="center"
      >
      </el-table-column>
   </el-table>

2,其次在methods中写objectSpanMethod方法逻辑

methods:{
	//合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
     const span = column['property'] + '-span'
     if(row[span]){
        return row[span]
      }
    },
 }

3,然后再调用页面引入通用方法mergeTableRow

import {mergeTableRow} from '@/assets/js/unit.js'

4,在数据接口中调用此通用方法

 data () {
    return {
    	tableData:[]  //页面需要展示的数据
     }
   },
  created () {
    this.getListData();
  },
  methods:{

	getListData () {
      this.$axios.接口(接口参数).then(res => {
        if (res.code === '0') {
          this.pages.total = res.data.total
          this.tableData = mergeTableRow({
            data: res.data.records,
            mergeColNames: ['articleTypeName','purchaseDate','fullName','deptName'], // 需要合并的列,默认合并列相同的数据
            firstMergeColNames: ['purchaseDate','fullName','deptName'], // 受影响的列,只合并以firstMerge为首的同类型数据
            firstMerge: 'articleTypeName' // 以哪列为基础进行合并,一般为第一列
          })
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
}

至此全部操作已完成,效果图如下:
在这里插入图片描述

;