Antd使用Table组件可编辑行功能 + 扩展编辑行组件Select的全选功能

最新推荐文章于 2024-09-09 14:13:08 发布

几声安好

最新推荐文章于 2024-09-09 14:13:08 发布

阅读量3k

点赞数

分类专栏：个人笔记文章标签：前端 web

本文链接：https://blog.csdn.net/qq_35533595/article/details/110090215

版权

本文记录了在Ant Design的Table组件中实现行编辑功能，特别是结合Form组件和Select组件实现全选功能的过程。通过Form与Table的结合，实现了表格数据的可控，并详细说明了如何配置Select组件以达到全选效果。

摘要由CSDN通过智能技术生成

在使用Antd的UI组件库的Table组件时碰到的部分问题。以及业务需求处理在编辑过程中的Select组件扩充全选的功能。仅做记录。

实现编辑组件的主要代码

interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   
  editing: boolean;
  dataIndex: string;
  title: any;
  inputType: 'select' | 'text';
  record: Item;
  index: number;
  children: React.ReactNode;
}

const EditableCell: React.FC<EditableCellProps> = ({
   
    editing,
    dataIndex,
    title,
    inputType,
    record,
    index,
    children,
    ...restProps
  }) => {
   
    const inputNode = inputType === 'select' ? (
      <Select mode="multiple" maxTagCount={
   20} maxTagPlaceholder={