1
const convertColumn = useCallback(
2
  (column: ColumnType<RecordType>, columnIndex: number): TableColumnType<RecordType> => {
3
    const { Component, componentProps, type, align, layout, ...rest } = column;
4
    const isDataCell = type === 'data' || isNil(type);
5

6
    // 1. 解析布局：inline / w-full / h-full
7
    let layouts: (typeof layout)[] = [];
8
    let isInlineLayout = false;
9
    if (!Component && !layout) {
10
      layouts = ['inline'];
11
      isInlineLayout = true;
12
    } else {
13
      layouts = layout === 'block' || !layout ? ['w-full', 'h-full'] : [layout];
14
      isInlineLayout = layouts.includes('inline');
15
    }
16

17
    const dataIndex = isDataCell
18
      ? (column as DataColumnType<RecordType, keyof RecordType>).dataIndex
19
      : rowKey;
20

21
    return {
22
      ...rest,
23
      dataIndex: dataIndex as string,
24

25
      // 2. 头部单元格：如果这一列有任意单元格报错，则给表头加错误样式
26
      onHeaderCell: () => ({
27
        className: classNames({ [`${prefixCls}-th-status-error`]: Boolean(cellStatus[columnIndex]) }),
28
      }),
29

30
      // 3. 表体单元格 onCell：负责行为 + 样式
31
      onCell: (record: RecordType, rowIndex) => {
32
        if (!record || isNil(rowIndex)) return {};
33
        if (isDataCell) {
34
          // 计算当前单元格的状态：是否编辑 / 是否有错误 / 点击次数
35
          const { edited, errorMessage, clickCount } = computeStatus(rowIndex, columnIndex);
36

37
          // 组装单元格 className：状态 + 布局
38
          const cns = classNames(`${prefixCls}-cell-data`, {
39
            [`${prefixCls}-cell-error`]: errorMessage,
40
            [`${prefixCls}-cell-active`]: edited,
41
            [`${prefixCls}-cell-no-selection`]: clickCount === 1,
42
            [`${prefixCls}-cell-layout-w-full`]: layouts.includes('w-full'),
43
            [`${prefixCls}-cell-layout-h-full`]: layouts.includes('h-full'),
44
            [`${prefixCls}-cell-layout-inline`]: isInlineLayout,
45
          });
46

47
          return {
48
            className: cns,
49
            onClick: (e) => {
50
              // 维护点击计数：第一次点击只选中，第二次点击进入编辑
51
              const newCellClickCount: typeof cellClickCount =
52
                [columnIndex, rowIndex, edited ? clickCount + 1 : 1];
53
              setCellClickCount(newCellClickCount);
54

55
              // 第二次点击时，如果目标是 input 等，可把光标移到末尾，避免整段选中
56
              if (edited) {
57
                const target = e.target as HTMLInputElement;
58
                if (newCellClickCount[2] === 2 && typeof target.selectionStart === 'number') {
59
                  target.selectionStart = target.selectionEnd;
60
                }
61
              }
62
            },
63
          };
64
        }
65
        // 操作列：只挂上操作列样式
66
        return { className: `${prefixCls}-cell-operator` };
67
      },
68

69
      // 4. render：真正渲染单元格内容，并把受控能力注入进去
70
      render: (_: any, record: RecordType, rowIndex: number) => {
71
        if (isDataCell) {
72
          const { edited, errorMessage } = computeStatus(rowIndex, dataIndex as any);
73
          return (
74
            <Cell<RecordType>
75
              // 来自列配置的 componentProps：业务侧写的 props
76
              componentProps={componentProps}
77
              // 真正渲染的组件：列没指定时默认用 Sheet.Text
78
              Component={(Component ?? Weigets.Text) as React.ComponentType<DataCellComponentProps>}
79
              // 受控 value：从当前行数据里取对应 dataIndex 的值
80
              value={record[dataIndex]}
81
              // 定位信息：用于更新与校验
82
              rowIndex={rowIndex}
83
              dataIndex={dataIndex}
84
              // 校验相关：是否展示 tooltip、错误信息
85
              validateTooltip={Component ? validateTooltip : false}
86
              edited={edited}
87
              errorMessage={errorMessage}
88
              // 视觉与布局
89
              prefixCls={prefixCls}
90
              align={align}
91
              className={isInlineLayout ? undefined : `${prefixCls}-cell-inner-layout`}
92
              // 更新回调：让单元格在内部调用时，能只更新自己这一格
93
              onUpdateCellByKey={updateCellByKey}
94
            />
95
          );
96
        }
97

98
        // 操作列的渲染：把当前行记录与一组操作回调注入进去
99
        return (
100
          <OperatorCell<RecordType>
101
            Component={Component as React.ComponentType<OperatorCellComponentProps<RecordType>>}
102
            value={record}
103
            index={rowIndex}
104
            prefixCls={prefixCls}
105
            componentProps={componentProps}
106
            onInsertRow={insertRow}
107
            onDeleteRow={deleteRow}
108
            onUpdateCell={updateCell}
109
            align={align}
110
            className={isInlineLayout ? undefined : `${prefixCls}-cell-inner-layout`}
111
          />
112
        );
113
      },
114
    };
115
  },
116
  [computeStatus, prefixCls, updateCellByKey, validateTooltip, updateCell],
117
);

1
// 开发者无需手动定义复杂的泛型
2
Sheet.col(Sheet.InputNumber<number>, {
3
  title: '价格',
4
  dataIndex: 'price',
5
  //这里的 componentProps 会被自动推导为 InputNumberProps，且排除了 value/onChange
6
  componentProps: {
7
    min: 0,
8
    precision: 2
9
  },
10
})

1
import Sheet, { SheetRef } from '@byte.n/antd-ext/Sheet';
2
import React, { useRef } from 'react';
3

4
const App = () => {
5
  const ref = useRef<SheetRef<any>>(null);
6

7
  const columns = [
8
    // 使用辅助函数定义列
9
    Sheet.col(Sheet.Input, {
10
      title: '商品名称',
11
      dataIndex: 'name',
12
      rule: { required: true, message: '必填' }, // 列级校验
13
    }),
14
    Sheet.col(Sheet.InputNumber, {
15
      title: '数量',
16
      dataIndex: 'count',
17
      componentProps: { min: 1 },
18
    }),
19
    // 自定义操作列
20
    Sheet.operatorCol(Sheet.Text, {
21
      title: '操作',
22
      width: 80
23
    }),
24
  ];
25

26
  return (
27
    <div>
28
      <div style={{ marginBottom: 16 }}>
29
        <button onClick={() => ref.current?.insertRow(0)}>新增一行</button>
30
        <button onClick={() => ref.current?.validate()}>提交验证</button>
31
      </div>
32

33
      <Sheet
34
        ref={ref}
35
        rowKey="id"
36
        // 生成唯一键的策略
37
        createNewKey={({ index }) => `row_${Date.now()}_${index}`}
38
        columns={columns}
39
        defaultValue={[{ id: '1', name: '示例商品', count: 10 }]}
40
      />
41
    </div>
42
  );
43
};