阿里ant组件库 a-table表格合并单元格

第一次接触阿里ant ui组件库,遇到需要合并单元格的需求,就去网上找了一个判断的方法,记录一下
这个是Vue项目里用到的
在js中声明

function getRowSpanCount(data, key, target) {
  if (!Array.isArray(data)) return 1;
  data = data.map(_ => _[key]); // 只取出筛选项
  let preValue = data[0];
  const res = [[preValue]]; // 放进二维数组里
  let index = 0; // 二维数组下标
  for (let i = 1; i < data.length; i++) {
    if (data[i] === preValue) { // 相同放进二维数组
      res[index].push(data[i]);
    } else { // 不相同二维数组下标+1
      index += 1;
      res[index] = [];
      res[index].push(data[i]);
      preValue = data[i];
    }
  }
  const arr = [];
  res.forEach((_) => {
    const len = _.length;
    for (let i = 0; i < len; i++) {
      arr.push(i === 0 ? len : 0);
    }
  });
  return arr[target];
}

在data中调用getRowSpanCount
第一个参数是你整个表格数据,
第二个参数是你要判断合并的列的key值
第三个参数customRender里的index(直接写index那就好)

columns:[
	{
	   title: '部门',
	   align: 'center',
	   dataIndex: 'bumen',
	   customRender: (text, row, index) => {
	     const obj = {
	       children:text,
	       attrs:{}
	     }
	     const data = this.dataSource
	     obj.attrs.rowSpan = getRowSpanCount(data||[],'bumen',index)
	     return obj
	   },
	 },
	 {
	   title: '区域',
	   align: 'center',
	   dataIndex: 'quyu',
	   customRender: (text, row, index) => {
	     const obj = {
	       children:text,
	       attrs:{}
	     }
	     const data = this.dataSource
	     obj.attrs.rowSpan = getRowSpanCount(data||[],'quyu',index)
	     return obj
	   },
	 },
	 {
	   title: '业务部门',
	   align: 'center',
	   dataIndex: 'yewu'
	 },
	 {
	   title: '当期银行回款',
	   align: 'center',
	   dataIndex: 'num1'
	 },
	 {
	   title: '本月订单金额',
	   align: 'center',
	   dataIndex: 'num2'
	 },
	 {
	   title: '本月销售出库金额',
	   align: 'center',
	   dataIndex: 'num3'
	 }
],

后来改了需求,合并的数据层级可能不是第一层,就加了一个deepNum字段
现在又有了新需求: 后面的合并单元格有一个前置条件是前面的某个数据相等

// deepNum  当前相等条件层级深度
// prerequisite  前置相等条件
// prerequisiteDeep  前置相等条件的层级深度
export function getRowSpanCount(tmpData, key, target, deepNum = 1, prerequisite, prerequisiteDeep = 1) {
  let data = Object.assign([], tmpData)
  if (!Array.isArray(data)) return 1
  let prerequisiteList = []
  if (deepNum == 2) {
    let arr = key.split('.')
    data = data.map(x => (x[arr[0]] && x[arr[0]][arr[1]]) || '')
    // console.log('data', data)
  } else if (deepNum == 3) {
    let arr = key.split('.')
    data = data.map(x => (x[arr[0]] && x[arr[0]][arr[1]] && x[arr[0]][arr[1]][arr[2]]) || '')
  } else if (deepNum == 4) {
    let arr = key.split('.')
    data = data.map(
      x => (x[arr[0]] && x[arr[0]][arr[1]] && x[arr[0]][arr[1]][arr[2]] && x[arr[0]][arr[1]][arr[2]][arr[3]]) || ''
    )
  } else {
    data = data.map(_ => _[key] || '') // 取出筛选项数组
  }

  if (prerequisite) {
    if (prerequisiteDeep == 1) {
      prerequisiteList = tmpData.map(_ => _[prerequisite] || '')
    } else if (prerequisiteDeep == 2) {
      let arr = prerequisite.split('.')
      prerequisiteList = tmpData.map(x => (x[arr[0]] && x[arr[0]][arr[1]]) || '')
    }
    console.log('prerequisiteList', tmpData, prerequisiteList)
  }
  let preValue = data[0]
  const res = [[preValue]] // 放进二维数组里
  let index = 0 // 二维数组下标
  for (let i = 1; i < data.length; i++) {
    // 有前置相等条件
    if (prerequisite) {
      // console.log('data[i]', data[i], preValue, data[i] === preValue, data[i].toString() === preValue.toString())
      if (
        prerequisiteList[i] &&
        prerequisiteList[i - 1] === prerequisiteList[i] &&
        data[i].toString() === preValue.toString()
      ) {
        res[index].push(data[i])
      } else {
        // 不相同二维数组下标后移
        index += 1
        res[index] = []
        res[index].push(data[i])
        preValue = data[i]
      }
    } else {
      // 没有前置相等条件
      if (data[i] === preValue) {
        // 相同放进二维数组
        res[index].push(data[i])
      } else {
        // 不相同二维数组下标后移
        index += 1
        res[index] = []
        res[index].push(data[i])
        preValue = data[i]
      }
    }
  }
  const arr = []
  res.forEach(_ => {
    const len = _.length
    for (let i = 0; i < len; i++) {
      arr.push(i === 0 ? len : 0)
    }
  })
  return arr[target]
}