如何实现这种具有编辑与校验功能的表格

[bbcvc]

看到coze里使用到了semi这个组件库，想问问这个表格组件：

1. 这个表格使用semi的table如何实现？
2. semi有没有类似于antd-pro的复杂组件库？

[acccccccb]

Table.Column的render参数可以实现

[pointhalo]

1. +1，同上。Column render可以是任意 ReactNode。你结合 Form 的 Field Component 一起使用就行。

import React from 'react';
import { Table, Avatar } from '@douyinfe/semi-ui';
import { IconMore } from '@douyinfe/semi-icons';

var gene = (row, column) => {
    const columns = [];
    for (let i = 0; i < column; i++) {
        let cur = {
            title: `c-${i}`,
            dataIndex: `c-${i}`,
            width: 200,
            render: (text, record, rowIndex) => {
                return <Form.Input field={`data[${rowIndex}][c-${i}]`} pure style={{ width: 120 }} />;
            }
        };
        columns.push(cur);
    }

    let data = [];
    for (let i = 0; i < row; i++) {
        const currentRow = {};
        for (let j = 0; j < column; j++) {
            currentRow[`c-${j}`] = `r-${i}-c-${j}`;
        }
        data.push(currentRow);
    }
    return { data, columns };
};

let { data, columns } = gene(3, 5);

function App() {
 
    const [dataSource, setData] = useState(data);

    return (
        <>
            <Form initValues={{ data: dataSource }} onValueChange={values => console.log(values)}>
                <Table
                    style={{ minHeight: 350 }}
                    columns={columns}
                    dataSource={dataSource}
                    pagination={false}
                />
            </Form>
        </>
    );
}

render(App);

2. 没有。也不计划做。这类封装跟开发者个人偏好相关性更强相关，做复杂了灵活性不高，做简单了没什么意义，你们自己按照自己的使用习惯封装更合适。