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;
          },
        }

猜你喜欢

转载自www.cnblogs.com/snowhite/p/12580265.html