table 表格 行列合并

正常table 表格合并都在 随便搜都可以搜一堆代码 但是如果是复杂数据的表格 就比较麻烦
整理一波！

关键变量

table data数据  sliceTable  根据页码做一个剪切数据 否则切页面表格会乱
text。根据啥字段合并
record.cells[index]?.operations?.[0]?.operationCode  根据table的哪个字段合并

直接上代码 简单案例

return {
        key: `${index}`,
        title: item.text,
        width: !flag ? cellsWidth(maxCellsLength) : newCellsWidth(index),
        render: (linetext, record, idx) => {
let text = linetext?.cells?.[1]?.text
                const prevRow = sliceTable?.[idx - 1];
                const prevValue = prevRow?.cells?.[1]?.text;
                const isFirstCell = prevValue !== text;
                if (isFirstCell) {
                  const rowSpan = sliceTable.filter((r) => r?.cells?.[1]?.text === text).length; //寻找重叠的值
                  return {
                    children: <span style={{ display: 'flex' }}>
                      <Abbr text={text || '-'} line={2} />
                      {record.cells[index]?.hoverMessage !== null && (
                        <Tooltip placement="top" title={record.cells[index]?.hoverMessage}>
                          <AliIcon
                            style={{ marginLeft: 4, color: '#AAA' }}
                            type="anticon-dpicon icon-wenhao"
                          />
                        </Tooltip>
                      )}
                    </span>,
                    props: { rowSpan },
                  };
                } else {
                  return {
                    children: <span style={{ display: 'flex' }}>
                      <Abbr text={text || '-'} line={2} />
                      {record.cells[index]?.hoverMessage !== null && (
                        <Tooltip placement="top" title={record.cells[index]?.hoverMessage}>
                          <AliIcon
                            style={{ marginLeft: 4, color: '#AAA' }}
                            type="anticon-dpicon icon-wenhao"
                          />
                        </Tooltip>
                      )}
                    </span>,
                    props: { rowSpan: 0 },
                  }
                }
                }

复杂案例

 return {
        key: `${index}`,
        title: item.text,
        width: !flag ? cellsWidth(maxCellsLength) : newCellsWidth(index),
        render: (linetext, record, idx) => {
          if (flag) {// 说明走的是新发布娇艳的逻辑
            if (record.cells[index]?.operations?.[0]?.operationCode === 'PUBLISH_CHECK_STRATEGY_SKIP') {// 所属策略
              let text = linetext?.cells?.[0]?.operations?.[0]?.operationValue?.text
              const prevRow = sliceTable?.[idx - 1];
              const prevValue = prevRow?.cells?.[0]?.operations?.[0]?.operationValue?.text;
              const isFirstCell = prevValue !== text;
              if (isFirstCell) {
                const rowSpan = sliceTable.filter((r) => r?.cells?.[0]?.operations?.[0]?.operationValue?.text === text).length;
                return {
                  children: <div style={{ display: "flex" }}>
                    <div className={styles['dp-textOverflow']}>
                      <Tooltip placement="top" title={record.cells[index]?.operations?.[0]?.operationValue?.text}>
                        <a onClick={() => {
                          window.open(`/assets/quality/changeStrategyNew/strategyDetailNew?strategyId=${record.cells[index]?.operations?.[0]?.operationValue?.strategyId}`)
                        }}>{record.cells[index]?.operations?.[0]?.operationValue?.text}</a> </Tooltip>&nbsp;
                    </div>
                    <div> <Tooltip placement="top" title={I18N.Publish.validationStart.textquest}>
                      <Icon type="file-text" style={{ cursor: 'pointer' }} onClick={
                        () => {
                          window.open(`/assets/quality/changeStrategyNew/strategyDetailNew?strategyId=${record.cells[index]?.operations?.[0]?.operationValue?.strategyId}&isFullScreen=true`)
                        }
                      } />
                    </Tooltip></div>
                  </div>,
                  props: { rowSpan },
                };
              }
              else {
                return {
                  children: <div style={{ display: "flex" }}>
                    <div className={styles['dp-textOverflow']}>
                      <Tooltip placement="top" title={record.cells[index]?.operations?.[0]?.operationValue?.text}>
                        <a onClick={() => {
                          window.open(`/assets/quality/changeStrategyNew/strategyDetailNew?strategyId=${record.cells[index]?.operations?.[0]?.operationValue?.strategyId}`)
                        }}>{record.cells[index]?.operations?.[0]?.operationValue?.text}</a> </Tooltip>&nbsp;

                    </div>
                    <div> <Tooltip placement="top" title={I18N.Publish.validationStart.textquest}>
                      <Icon type="file-text" style={{ cursor: 'pointer' }} onClick={
                        () => {
                          window.open(`/assets/quality/changeStrategyNew/strategyDetailNew?strategyId=${record.cells[index]?.operations?.[0]?.operationValue?.strategyId}&isFullScreen=true`)
                        }
                      } />
                    </Tooltip></div>
                  </div>,
                  props: { rowSpan: 0 },
                };
              }
            }
          }
        },
      };