antd中编辑表格的单元格EditableCell

最新推荐文章于 2024-06-05 19:21:16 发布
最新推荐文章于 2024-06-05 19:21:16 发布
阅读量1.1k 收藏
点赞数
文章标签： javascript 前端 react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46533954/article/details/131935999
版权
文章介绍了如何在AntDesign的表格中使用EditableCell组件实现单元格编辑功能，以及如何处理编辑时的数据验证和保存问题。通过将EditableCell组件独立于应用组件之外，确保了单元格编辑的互不影响。同时，文章展示了如何在外部获取接口数据并将其用于EditableCell中的编辑表单，例如在部门选择的例子中，利用TreeSelect组件显示部门列表。
摘要由CSDN通过智能技术生成

1.一定按照antd提供的代码格式，编辑的方法这一块放在当前组件的外面
2.编辑组件一定要放在应用组件APP的外面，保证调用的时候每个单元格和行不会互相影响，这个地方如果放在里面目前遇到的问题：编辑单元格的时候form表单必填的提示会消失，比如第一个单元格修改的时候空着，下面会出现必填提示，第二个修改的时候有数据，失焦的时候第二个是保存成功的，但是同时第一个也默认变成最初的数据也保存成功了，当然正确的表现形式则是第二个失焦，第二个保存成功，第一个依旧是有必填提示的
在这里插入图片描述

const EditableCell: React.FC<EditableCellProps> = ({
  title,
  editable,
  children,
  dataIndex,
  record,
  handleSave,
  ...restProps
}) => {
  const [editing, setEditing] = useState(false);
  const inputRef = useRef<InputRef>(null);
  const form = useContext(EditableContext)!;

  useEffect(() => {
    if (editing) {
      inputRef.current!.focus();
    }
  }, [editing]);

  const toggleEdit = () => {
    setEditing(!editing);
    form.setFieldsValue({ [dataIndex]: record[dataIndex] });
  };

  const save = async () => {
    try {
      const values = await form.validateFields();

      toggleEdit();
      handleSave({ ...record, ...values });
    } catch (errInfo) {
      console.log('Save failed:', errInfo);
    }
  };

  let childNode = children;

  if (editable) {
    childNode = editing ? (
      <Form.Item
        style={{ margin: 0 }}
        name={dataIndex}
        rules={[
          {
            required: true,
            message: `${title} is required.`,
          },
        ]}
      >
        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
      </Form.Item>
    ) : (
      <div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={toggleEdit}>
        {children}
      </div>
    );
  }

  return <td {...restProps}>{childNode}</td>;
};

type EditableTableProps = Parameters<typeof Table>[0];

interface DataType {
  key: React.Key;
  name: string;
  age: string;
  address: string;
}

type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;


//编辑组件一定要放在应用组件APP的外面，保证调用的时候每个单元格和行不会互相影响
const App: React.FC = () => {
  const [dataSource, setDataSource] = useState<DataType[]>([
    {
      key: '0',
      name: 'Edward King 0',
      age: '32',
      address: 'London, Park Lane no. 0',
    },
    {
      key: '1',
      name: 'Edward King 1',
      age: '32',
      address: 'London, Park Lane no. 1',
    },
  ]);

  const [count, setCount] = useState(2);

  const handleDelete = (key: React.Key) => {
    const newData = dataSource.filter((item) => item.key !== key);
    setDataSource(newData);
  };

  const defaultColumns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[] = [
    {
      title: 'name',
      dataIndex: 'name',
      width: '30%',
      editable: true,
    },
    {
      title: 'age',
      dataIndex: 'age',
    },
    {
      title: 'address',
      dataIndex: 'address',
    },
    {
      title: 'operation',
      dataIndex: 'operation',
      render: (_, record: { key: React.Key }) =>
        dataSource.length >= 1 ? (
          <Popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record.key)}>
            <a>Delete</a>
          </Popconfirm>
        ) : null,
    },
  ];

  const handleAdd = () => {
    const newData: DataType = {
      key: count,
      name: `Edward King ${count}`,
      age: '32',
      address: `London, Park Lane no. ${count}`,
    };
    setDataSource([...dataSource, newData]);
    setCount(count + 1);
  };

  const handleSave = (row: DataType) => {
    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: DataType) => ({
        record,
        editable: col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
        handleSave,
      }),
    };
  });

  return (
    <div>
      <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>
        Add a row
      </Button>
      <Table
        components={components}
        rowClassName={() => 'editable-row'}
        bordered
        dataSource={dataSource}
        columns={columns as ColumnTypes}
      />
    </div>
  );
};

export default App;

3.由于EditableCell方法放在了外面，进行编辑形式的时候需要接口请求的数据，这时候把需要的变量定义成普通的变量（和EditableCell方法、App组件平行的关系），在App组件正常useEffect的时候调用接口，然后把外面的变量赋值，最后直接在EditableCell方法用就可以

//😊😊😊😊😊😊😊
//1.定义全局变量organizeList
//😊😊😊😊😊😊😊
const organizeList:any=[]


const EditableCell: React.FC<EditableCellProps> = ({
  title,
  editable,
  children,
  dataIndex,
  record,
  handleSave,
  ...restProps
}) => {
  const [editing, setEditing] = useState(false);
  const selectRef = useRef<any>(null);
  const form = useContext(EditableContext)!;

  useEffect(() => {
    if (editing) {
      selectRef.current!.focus();
    }
  }, [editing]);

  const toggleEdit = () => {
    setEditing(!editing);
    form.setFieldsValue({ [dataIndex]: record[dataIndex] });
  };

  const save = async () => {
    try {
      const values = await form.validateFields();

      toggleEdit();
      handleSave({ ...record, ...values });
    } catch (errInfo) {
      console.log('Save failed:', errInfo);
    }
  };

  let childNode = children;

  if (editable) {
    childNode = editing ? (
      <Form.Item
        style={{ margin: 0 }}
        name={dataIndex}
        rules={[
          {
            required: true,
            message: `${title} is required.`,
          },
        ]}
      >
//😊😊😊😊😊😊😊
//3.直接用organizeList
//😊😊😊😊😊😊😊

       {organizeList.length > 0 ? (
              <TreeSelect
                ref={selectRef}
                style={{ width: "100%" }}
                fieldNames={{ label: "deptName", value: "deptId" }}
                dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
                treeData={organizeList}
                placeholder="请选择部门"
                onChange={changeTree}
                onBlur={save}
                // onFocus={}
                showSearch={false}
                showCheckedStrategy={SHOW_PARENT}
                treeDefaultExpandAll
                multiple
                treeCheckable
                maxTagCount={3}
                maxTagTextLength={8}
              />
            ) : (
              <Input style={{ width: "100%" }} placeholder="加载中..." readOnly />
            )}
      </Form.Item>
    ) : (
      <div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={toggleEdit}>
        {children}
      </div>
    );
  }

  return <td {...restProps}>{childNode}</td>;
};

type EditableTableProps = Parameters<typeof Table>[0];

interface DataType {
  key: React.Key;
  name: string;
  age: string;
  address: string;
}

type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;


//编辑组件一定要放在应用组件APP的外面，保证调用的时候每个单元格和行不会互相影响
const App: React.FC = () => {
//😊😊😊😊😊😊😊
//2.useeffect获取接口数据并且赋值
//😊😊😊😊😊😊😊
// 获取部门&部门选择
  const getCountDepts = async () => {
    const [err, res] = await echartsApi.getCountDepts();
    if (!err && res) {
      organizeList=res.data
    }
  };
  useEffect(() => {
    // 获取部门
    getCountDepts();
  }, []);



  const [dataSource, setDataSource] = useState<DataType[]>([
    {
      key: '0',
      name: 'Edward King 0',
      age: '32',
      address: 'London, Park Lane no. 0',
    },
    {
      key: '1',
      name: 'Edward King 1',
      age: '32',
      address: 'London, Park Lane no. 1',
    },
  ]);

  const [count, setCount] = useState(2);

  const handleDelete = (key: React.Key) => {
    const newData = dataSource.filter((item) => item.key !== key);
    setDataSource(newData);
  };

  const defaultColumns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[] = [
    {
      title: 'name',
      dataIndex: 'name',
      width: '30%',
      editable: true,
    },
    {
      title: 'age',
      dataIndex: 'age',
    },
    {
      title: 'address',
      dataIndex: 'address',
    },
    {
      title: 'operation',
      dataIndex: 'operation',
      render: (_, record: { key: React.Key }) =>
        dataSource.length >= 1 ? (
          <Popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record.key)}>
            <a>Delete</a>
          </Popconfirm>
        ) : null,
    },
  ];

  const handleAdd = () => {
    const newData: DataType = {
      key: count,
      name: `Edward King ${count}`,
      age: '32',
      address: `London, Park Lane no. ${count}`,
    };
    setDataSource([...dataSource, newData]);
    setCount(count + 1);
  };

  const handleSave = (row: DataType) => {
    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: DataType) => ({
        record,
        editable: col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
        handleSave,
      }),
    };
  });

  return (
    <div>
      <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>
        Add a row
      </Button>
      <Table
        components={components}
        rowClassName={() => 'editable-row'}
        bordered
        dataSource={dataSource}
        columns={columns as ColumnTypes}
      />
    </div>
  );
};

export default App;
const T
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React+antd实现可编辑单元格，非官网写法，不使用可编辑行和form验证
six66667的博客
09-07 818
antd3以上的写法乍一看还挺复杂，自己写了个精简版。没用EditableRow+Cell的结构，也不使用Context、高阶组件等，不使用form验证。现在这个可编辑单元格组件在鼠标失焦或者回车后，列数据会变回修改前的数据，在state里面加个text，把最后显示的 {children} 换成 {text} 就可以。最后使用的时候直接在column元素的render里面 就好啦， props一定要传处理保存修改的方法。
Antd4可编辑单元格.txt
01-12
Ant Design 可编辑单元格，根据antd 3 + antd 4 修改，完全使用状态组件
Ant Design Vue Table组件全单元格编辑实现方案
最新发布
个人学习笔记库，一篇一篇记录成长的足迹
06-05 2013
ant design vue table组件全部单元格编辑
antd的Table组件实现单元格可编辑
qq_52845451的博客
03-14 6708
antd的Table组件实现单元格可编辑
antd table 编辑单元格功能
徐同保的专栏
11-01 1295
EditCell.js: import React, { useState, useEffect, useRef } from 'react' import { Popover, Input, Form, Button } from 'antd' import Icon from './Icon' export default function EditCell(props) { const { record, handleEditCell, placement = ...
antd 实现可编辑表格项
qq_59911037的博客
10-23 657
分两个页面，第一个定义编辑状态下得输入框，第二个定义表格及状态，通过columns向下传递，这样可以单独编辑该列中得单项数据，大概得东西都加了，缺得自己补下，有问题可交流。
Antd Table 可编辑表格
热门推荐
知之为知之，不知为不知
11-21 1万+
antd Table 官方文档提及了 可编辑单元格、可编辑行，这里解决可编辑表格；主要思路是将antd Table可编辑行 与antd Form.List 相结合；表格内编辑；可编辑单元格；可编辑行；简单易理解 ​
在antd Table中插入可编辑的单元格实例
01-21
补充知识：React+Ant Design实现可编辑单元格、添加行并利用form获取新增数据 实现如下图所示需求： 实现功能说明： 点击添加按钮，在表格中添加新的空白行（如下图所示），在点击提交的时候获取空白行的数据 在...
antd-editable:从antd继承的React组件，可以编辑单元格表
05-14
可编辑表格(React hooks) 一个基于 的 React 组件， 可以编辑表格的内容并实时保存。 Features 行/列可编辑 tab 键切换 自定义表单数据校验 typescript 支持 支持 Select 控件 行/列/单元格禁用 何时使用 当...
editablecell:Ant Design of Vue之带select控件，单元格编辑功能的表格EditableCell组件
05-11
可编辑单元格 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint 自定义配置 请参阅。
editablecell:Ant Design Vue Table Editablecell组件
05-10
可编辑单元格 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint 自定义配置 请参阅。
editableCell:用于将表格单元格转换为可选择的、可编辑的单元格的组件，其行为与 Microsoft Excel 中的单元格非常相似
06-22
Knockout-EditableCell Knockout-EditableCell（或只是editableCell ）是的扩展，用于将普通表格单元格转换为可选择的、可编辑的单元格，其行为与 Microsoft Excel 中的单元格非常相似。 它支持以下功能： 键盘和鼠标导航 单元格选择（通过键盘和鼠标） 就地编辑 Knockout observable 可观察值的附加显示自定义（通过cellText和cellHTML函数） 将新值应用于所有选定的单元格（通过 Ctrl+ENTER） 试用！ 或者在！ 要求 editableCell依赖于 （因此隐式依赖于 jQuery）。 v2.1.1 支持 Knockout v3.0.0+，并且兼容 Knockout 支持的任何版本的 jQuery。 浏览器支持 editableCell应该支持大多数现代浏览器：IE8+、FF 31+
antd 表格列宽自适应方法以及错误处理操作
01-18
在antd 的表格中, 当你不设置表格滚动, 并且你给每一列设置了固定宽度, 那么他们会按照设置宽度的比例瓜分表格的宽度 表格横向滚动, 序号, 权属人左定位 antd 中的表格列固定是隐藏原列, 然后又在上面覆盖新列实现的...
基于antdv封装的特殊复杂表格，带通行描述信息、可展示通行的单元格信息、可跨页选择数据功能、分页功能、可编辑单元格功能
艾小逗
06-29 2324
1. 可展示通行的单元格信息2. 可跨页选择数据功能3. 表单插槽、合计插槽、操作按钮区插槽4. 分页功能5. 接口内请求api6. 可编辑单元格7. 表格组件暴漏出的方法：查询、获取选中数据、接口返回数据、当前表格数据【设置可编辑单元格时获取数据】
React使用antd实现可编辑单元格
见贤思齐焉，见不贤内自省
02-09 4074
React使用antd实现可编辑单元格
逐行解析Antd Design可编辑单元格
sakura的博客
12-15 5362
解析Antd Design可编辑单元格
Antd表格组件(table)可编辑单元格使用
qq_45467707的博客
12-03 3866
** Antd表格组件(table)可编辑单元格使用 ** export default function Category() { const [category, setcategory] = useState([]) useEffect(() => { axios.get('/userList/getNewsCategory').then(response => { const {data: {data}} = response setcategor
基于antd edit table二次改造支持所有单元格编辑及校验
吴小迪的博客
05-25 1140
表格分为俩种模式：view模式和edit模式在view模式下可点击edit按钮进入编辑模式在edit模式下点击cancel按钮回到view模式且数据还原在edit模式下点击generate保存数据暴露给外层组件在edit模式下所有的单元格但是可以编辑的在edit模式下点击generate会对所有单元格进行validate校验。
reactjs antd可编辑单元格组件
09-06
ReactJS Antd是一个用于构建用户界面的开源JavaScript库。Antd提供了大量的UI组件，其中包括可编辑单元格组件。 在Antd中，可编辑单元格组件被称为EditableCell。它可以用于在表格或其他类似的布局中的单元格中进行编辑操作。您可以在表单中使用此组件，以便用户可以更改表格中的数据。 EditableCell组件具有以下特性： 1. 单击单元格后，它会开启编辑模式，让用户可以在其中输入内容。 2. 用户可以通过键盘或鼠标进行编辑。 3. 它提供了一些常见的编辑功能，如文本输入、下拉菜单选择等。 4. 编辑完成后，用户可以通过按下“Enter”键或点击外部区域来保存编辑内容。 5. 你可以通过onChange属性来监听编辑内容的变化，并在你自己的逻辑中对数据进行处理。 要使用EditableCell组件，您需要在React组件中引入它，然后将其作为表格或其他容器中的一个单元格组件使用。您可以为其提供初始值、编辑模式、事件回调等属性。 例如，您可以将EditableCell组件作为Antd Table组件的其中一个列组件使用，以实现可编辑的表格单元格。 总之，ReactJS Antd提供了一个方便易用的可编辑单元格组件，它可以帮助您在React应用中创建可编辑的表格。您可以根据您的需求自定义其外观和行为，并使用其提供的功能轻松地管理和处理用户输入的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值