react 项目 合并单元格解决方案

// 右侧产品列表

  getProductList (){

    http({

      method: 'get',

      url: '/v2/activity/productAdaptationRecommendRight',

      data: {

      //   sessionId: this.state.sessionId,

      //   tenantId: 'tenant_system'

      }

    }).then((res) => {

      let arr = res.data.data

      let newarr = arr.map(item => item.product_name)

      let newnewarr = [... new Set(newarr)]

      // console.log(newarr)

      console.log('合并前的数组')

      let narr = []

      const proList = arr.reduce((result, item,index) => {

        if (result.indexOf(item.product_name) < 0) {

          result.push(item.product_name)

        }

        return result

        }, []).reduce((result, product_name) => {

        const children = arr.filter(item => item.product_name === product_name)

        // console.log(children)

        result = result.concat(

          children.map((item, index) => ({

            ...item,

            rowSpan: index === 0 ? children.length : 0

          }))

        )

        return result;

        }, []);

        console.log("合并后的新数组")

        console.log(proList)

        this.setState({

          tableData: proList

        })

    })

  }

 

使用方法：

const columns = [

         {

          key: 'product_name',

          title: '产品',

          dataIndex: 'product_name',

          render: (text, record, index) => {

            const obj = {

              children: <span className='tdImg'><img src = {salesIcon} />{text}</span>,

              props: {},

            };

            obj.props.rowSpan = record.rowSpan

            obj.props.className = record.rowSpan === 0?'borderRightNone':'borderRightOne'

            return obj;

          },

        }