react+antd 带横线分隔表格

1、需求ui

2、antd table组件没有这种样式，需要自己改写

3、改写代码

3.1 获取数据数据格式

3.2 父组件

export default function BusinessCustomerService() {

const [columns, setColumns] = useState([
    // 利用title可以返回ReactNode属性  和 css 实现分组
    {
      title: (
        <div
          style={{
            position: "relative",
          }}
        >
          <div style={{ textAlign: "right", marginLeft: 50 }}>日期</div>
          <div style={{ textAlign: "left" }}>设备</div>
          <div
            style={{
              content: "",
              position: "absolute",
              width: "1px",
              height: "140px",
              top: "-48px",
              left: "42px",
              backgroundColor: "#e8e8e8",
              display: "block",
              transform: "rotate(-57deg)",
            }}
          ></div>
        </div>
      ),
      dataIndex: "beforeUpdateLevel",
      key: "beforeUpdateLevel",
      // 固定分组这一栏的宽度
      width: 120,
      align: "center",
    },
  ]);
  
    const [data, setData] = useState([
    {
      key: "row1",
      beforeUpdateLevel: "当月总门店数",
      level: 1, // 表示当前行变更前为等级1
    },
    {
      key: "row2",
      beforeUpdateLevel: "当月新增",
      level: 2,
    },
  ]);
  
  useEffect(() => {
    getEnterpriseOverviewTrend();
  }, []);
  
  const getEnterpriseOverviewTrend = () => {
    getEnterpriseOverviewTrendApi().then((res) => {
      let _data = res.data.dataList;
      for (let i in _data) {
        columns.push({
          title: _data[i].statDate,
          dataIndex: `month_${i}`,
          key: `month_${i}`,
          editable: true,
          align: "center",
        });
        data[0][`month_${i}`] = _data[i].totalNum;
        data[1][`month_${i}`] = _data[i].increNum;
      }
     setColumns([...columns])
     setData([...data])
    });
  };
  
  return (
    <>
       <GroupTable defaultColumns={columns} dataSource={data}></GroupTable>
    </>
  );
}

3.3 子组件

  const { defaultColumns } = props;
  const [dataSource, setDataSource] = useState(props.dataSource);

  useImperativeHandle(props.cRef, () => ({
    getDataSource: () => dataSource, // 暴露组件内部数据给父组件
    getColumns: () => columns
  }));

  // 编辑单元格
  const handleSave = (row) => {
    const newData = [...dataSource];
    const index = newData.findIndex((item) => row.key === item.key);
    const item = newData[index];
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
    setDataSource(newData);
  };

  const components = {
    body: {
      row: EditableRow,
      cell: EditableCell,
    },
  };
  // 处理表格列表--添加表格可编辑和编辑函数
  const columns = defaultColumns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record) => ({
        record,
        editable: col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
        handleSave,
      }),
    };
  });
  return (
    <Table
      components={components}
      rowClassName={() => "editable-row"}
      bordered
      dataSource={dataSource}
      columns={columns}
      pagination={false}
      scroll={{
        x: 200,
      }}
    />
  );
}