前言

国庆节过后，连续上了七天班，属实有点难顶，这次的收获和总结内容比较少，一个是 typescript 的 enum 数据展示疑问，一个是使用 antd 的 table 组件中遇到的表格行合并的问题，话不多说，进入正题。

展示 enum 的数据

写项目的时候，我们通常会写到枚举类型。枚举类型容易阅读，可维护性也高，是开发过程中不错的小帮手。可是最近，写公司项目的时候，我产生了一点疑问。先来看看代码

enum job {
   FE = 'FE',
   BE = 'BE',
}

const jobDisplay = {
   [job.FE]: '前端',
   [job.BE]: '后端',
}

const frontend = jobDisplay[job.FE]
const backend = jobDisplay[job.BE]

console.log(frontend, backend) // "前端", "后端"

可是我觉得很奇怪，我们这样写也能达到同样的目的

enum job {
   FE = '前端',
   BE = '后端',
}

console.log(job.FE, job.BE) // "前端", "后端"

为什么要费劲去多写一个对象去实现对于枚举值的匹配呢？目前我还不是特别理解这种行为，两种方式也均能通过 Object.keys和Object.values 获取所有的键和值，难道为了定义和展示逻辑分开吗？？？

table 组件实现表格行合并

平时，我们写代码可能会遇到这样的需求，如下图所示

具体如何实现行合并，我就不再赘述，大家可以点击 here，也可以往下阅读。

接下来，我们具体看看如何实现这样的效果，对于表格（antd）而言，最基本的内容是 dataSource 和 columns。

// columns
const columns = [
 {
   title: 'Teacher',
   dataIndex: 'teacher',
   key: 'teacher',
   // 通过 rowSpan 控制行合并，为0不占行，为n占n行，第一个为n，后面几个为0，即可实现上图效果
   onCell: (record) => ({ rowSpan: record?.rowSpan}) 
 },
 {
   title: 'Name',
   dataIndex: 'name',
   key: 'name',
 },
 {
   title: 'Age',
   dataIndex: 'age',
   key: 'age',
 },
];

// dataSource
const students = [
   {name: 'xiaokang',age: 23,teacher: 'teacher1'},
   {name: 'xiaomei',age: 24,teacher: 'teacher2'},
   {name: 'xiaohong',age: 21,teacher: 'teacher1'},
   {name: 'xiaozhi',age: 23,teacher: 'teacher2'},
   {name: 'xiaoqi',age: 25,teacher: 'teacher3'},
   {name: 'xiaoming',age: 22,teacher: 'teacher1'},
]

而我们从后端获取的数据并没有携带rowSpan，因此我们需要自己根据当前数据来判断多少行应该合并，算法如下

function addRowSpan(data, field) {
   const res = [] 
   let index = 0
   let flag = 0
   let value = ''
   const map = new Map()

   // 根据 field 来调整数据，相同 filed 的数据在一块
   data.forEach((item) => {
      if(map.has(item[field])){
         const arr = map.get(item[field])
         map.set(item[field], [...arr, item])
      }else{
         map.set(item[field], [item])
      }
   })

   map.forEach((item) => {
      res.push(...item)
   })

   while(index < res.length){
      const item = res[index]
      if(!item?.rowSpan && value !== item[field]){ 
      // 如果没有 rowSpan 并且 当前 field 值不等于上一个的 field 值 （说明是新数据）
      // 比如 teacher1 遍历结束，下一个为 teacher2
         item.rowSpan = 1
         value = item[field]
         flag = index
      }else{
      // 否则 第一个 field 的 rowSpan 加一，当前对象的 rowSpan 为0
         res[flag].rowSpan += 1
         item.rowSpan = 0  
      }  
      index++
   }

   return res
} 

结语

如有错误或者想法，欢迎评论留言。