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