Ant Design Table组件行合并及表格头下拉筛选

最近在项目中实现了一个Table 相同数据行合并及表格头下拉筛选的需求，这类需求平时在项目中比较少遇到，操作的方法也比较麻烦，因此记录下来方便以后遇到有迹可循。

实现效果

合并相同行数据

1. 对dataSource数据进行处理，判断列scene字段是否有行数据相同，进行提取并添加新字段rowSpan，记录合并的行数

// 合并数组单元格
  createNewArr=data => {
    const dataSource = data.reduce((result, item) => {
      // 首先将name字段作为新数组result取出
      if (result.indexOf(item.scene) < 0) {
        result.push(item.scene)
      }

      return result
    }, []).reduce((result, scene) => {
      // 将name相同的数据作为新数组取出，并在其内部添加新字段**rowSpan**
      const children = data.filter(item => item.scene === scene)
      result = result.concat(
        children.map((item, index) => ({
          ...item,
          rowSpan: index === 0 ? children.length : 0, // 将第一行数据添加rowSpan字段
        }))
      )

      return result
    }, [])

    return dataSource
  }

2. 改变columnsList中scene的render

  columnsList = [
    {
      title: '场景',
      dataIndex: 'scene',
      render: (text, record, index) => {
        const obj = {
          children: text,
          props: {
            rowSpan: record.rowSpan,
          },
        }

        return obj
      },
    },
  ]

表格头行筛选

很多人会忽视了ant Table组件的title是支持ReactNode的，所以其实我们可以针对表头做很多操作。
每次下拉选项改变时去调接口获取新数据

  columnsList = [
    {
      title: '场景',
      dataIndex: 'scene',
      render: (text, record, index) => {
        const obj = {
          children: text,
          props: {
            rowSpan: record.rowSpan,
          },
        }

        return obj
      },
    },
     {
      title: () => (
      <Select defaultValue='' style={{ width: 120 }} onChange={value => this.handleChangeStep('stepTable', value)}>
        <Select.Option value=''>阶段(全部)</Select.Option>
        <Select.Option value='first'>阶段(一审)</Select.Option>
        <Select.Option value='second'>阶段(二审)</Select.Option>
      </Select>),
      dataIndex: 'step',
      align: 'center',
      filtered: true,
    },
  ]

参考链接🔗：
https://blog.csdn.net/Dong8508/article/details/83898810