V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
steins2628
V2EX  ›  问与答

有没有熟悉 Antd 可编辑表格的,自定义的数据类型应该怎么修改 Column 定义才能通过 ts 检查?

  •  
  •   steins2628 · 2023-04-25 22:18:59 +08:00 · 710 次点击
    这是一个创建于 588 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,自定义的数据结构大概长这样

    interface MyLabel {
        key: string;
        name: string;
        color?: string;
    }
    
    interface MyData {
        id: React.Key,
        group: number,   
        category: number 
        state: number,  
        keyword: string,
        create_at: number,
        edit_at: number,
    
        author?: string,
        level?: number,
        labels?: MyLabel[];
    }
    

    因为要做可编辑除了默认的类型还会有 render, filter...,现在的 column 类型大概是这样的

      {
        title: string,
        dataIndex: string,
        editable: boolean,
        filters?: undefined,
        filterSearch?: undefined,
        onFilter?: undefined,
        render?: undefined,
        ellipsis?: undefined,
        sorter?: undefined,
      }
    

    然后 ts 检查就会告诉我

    ... not assignable to type ColumnType<MyData> | ColumnGroupType<MyData>

    直接给 column 赋类型 ColumnsType<MyData> 也是不行的,有点迷茫不知道要怎么改了,官网教程也没说

    同时 render 的时候,默认的类型应该是 string | number | undefined, 实际上是个枚举,但直接给枚举类型也是报错的,用断言 as number 也是不行的

    有没有好兄弟分享下经验的,这种时候应该怎么定义类型?

    附上完整的 Column 定义

      const edit_tabel_column = [
        {
            title: 'level',
            dataIndex: 'level',
            editable: true,
        },
        {
            title: 'group',
            dataIndex: 'group',
            editable: true,
            filters: [
              {
                text: "Blacklist",
                value: CleanGroup.Blacklist
              },
              {
                text: "Whitelist",
                value: CleanGroup.Whitelist
              }
            ],
            filterSearch: false,
            onFilter: (value: CleanGroup, record: any) => record.group === value,
            render: (value: CleanGroup) => (
              <SelectCell group={value}/>
            ),
        },
        {
          title: 'category',
          dataIndex: 'category',
          editable: true,
          filters: [
            {
              text: 'Quick Access',
              value: CleanCategory.QuickAccess,
            },
            {
              text: 'Frequent Folder',
              value: CleanCategory.FrequentFolders,
            },
            {
              text: 'Recent File',
              value: CleanCategory.RecentFiles,
            },
          ],
          filterSearch: false,
          onFilter: (value: CleanCategory, record: any) => record.category === value,
          render: (value: CleanCategory) => (
              <SelectCell category={value}/>
            ),
        },
        {
          title: 'state',
          dataIndex: 'state',
          editable: true,
          filters: [
            {
              text: 'enabled',
              value: CleanState.Enabled
            },
            {
              text: 'disabled',
              value: CleanState.Disabled
            }
          ],
          filterSearch: false,
          onFilter: (value: CleanState, record: any) => record.state === value,
          render: (value: CleanState) => (
            <SelectCell badge state={value}/>
          ),
        },
        {
            title: 'keyword',
            dataIndex: 'keyword',
            editable: true,
            ellipsis: {
                showTitle: false,
            },
        },
        {
            title: 'create_at',
            dataIndex: 'create_at',
            ellipsis: {
                showTitle: false,
            },
            editable: false,
            sorter: (a: any, b: any) => a.create_at - b.create_at,
            render: (create_at: number) => (
            <Tooltip title={time.get_date_string_from_timestamp(create_at, "YYYY-MM-DD")} placement='top'>
                {time.get_date_string_from_timestamp(create_at, "YYYY-MM-DD")}
            </Tooltip>
            ),
        },
        {
            title: 'edit_at',
            dataIndex: 'edit_at',
            ellipsis: {
                showTitle: false,
            },
            editable: false,
            sorter: (a: any, b: any) => a.edit_at - b.edit_at,
            render: (edit_at: number) => (
            <Tooltip title={time.get_date_string_from_timestamp(edit_at, "YYYY-MM-DD")}>
                {time.get_date_string_from_timestamp(edit_at, "YYYY-MM-DD")}
            </Tooltip>
            ),
        },
        {
            title: 'operation',
            dataIndex: 'operation',
            render: (_: any, record: MyData) => {
              const editable = isEditing(record);
              return editable ? (
                <span>
                  <Typography.Link onClick={() => saveEditingRow(record.id)} style={{ marginRight: 8 }}>
                  {'save'}
                  </Typography.Link>
                  <Popconfirm title={'sure to cancel?')} onConfirm={cancelEditTableRow}>
                    <a>{'cancel'}</a>
                  </Popconfirm>
                </span>
              ) : (
                <div>
                  <Typography.Link disabled={editingKey !== ''} onClick={() => editTableRow(record)}>
                    {'edit'}
                  </Typography.Link>
                  <Divider type="vertical" />
                  <Typography.Link disabled={editingKey !== ''} onClick={() => removeRow(record)}>
                  {'delete'}
                  </Typography.Link>              
                </div>
              );
            },
        }
      ]
    
      const mergedEditColumns = edit_tabel_column.map((col) => {
        if (!col.editable) {
          return col;
        }
        return {
          ...col,
          onCell: (record: MyData) => ({
            record,
            inputType: col.dataIndex,
            dataIndex: col.dataIndex,
            title: col.title,
            editing: isEditing(record),
          }),
        };
      })
    
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1198 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 18:23 · PVG 02:23 · LAX 10:23 · JFK 13:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.