antd-procomponent中编辑表格动态数据设置的使用

简介: antd-procomponent中编辑表格动态数据设置的使用

一、前言

如果我们现在有这样的一个需求,在设置列的值时要同时改变列的值该怎么做呢?



如果使用antd-procomponent的EditableProTable组件能够很方便的实现,它提供了setRowDatagetRowsData的方法来获取和设置编辑表格的值:


二、使用EditableProTable实现上述需求

我们实现刚才的需求可以这些写:

1)定义editorFormRef

const editorFormRef = useRef<any>();

2)传递给EditableProTable

<EditableProTable<DataSourceType>
        rowKey="id"
        headerTitle="可编辑表格"
        editableFormRef={editorFormRef}
    ...
      />

3)通过renderFormItem自定义单元格

{
      title: '列C',
      dataIndex: 'decs',
      renderFormItem: ({ index }: any) => <ParamValue index={index} />,
    },

ParamValue 组件:

const ParamValue = ({ onChange, value, reqParamType, index }: any) => {
    const [inputValue, setInputValue] = useState<any>(value || '');
    const handleInputChange = (v: string) => {
      setInputValue(v);
      onChange(v);
      const data = editorFormRef.current?.getRowData(index);
      if (data) {
        const setData = { title: '123' };
        editorFormRef.current?.setRowData?.(index, { title: '123' });
      }
    };
    return (
        <Input
          placeholder="请输入值"
          value={inputValue}
          onChange={(e) => handleInputChange(e.target.value)}
        />
    );
  };

这样我们在修改列C值的同时将列A的值也做了修改了,上述的代码会将列A值改为123:


三、完整源码如下

完整代码如下:

import type { ProColumns } from '@ant-design/pro-components';
import { EditableProTable } from '@ant-design/pro-components';
import React, { useState, useRef } from 'react';
import { Input } from 'antd';
type DataSourceType = {
  id: React.Key;
  title?: string;
  readonly?: string;
  decs?: string;
  state?: string;
  created_at?: string;
  update_at?: string;
  children?: DataSourceType[];
};
const defaultData: DataSourceType[] = [
  {
    id: 624748504,
    title: '活动名称一',
    readonly: '活动名称一',
    decs: '这个活动真好玩',
    created_at: '1590486176000',
    update_at: '1590486176000',
  },
  {
    id: 624691229,
    title: '活动名称二',
    readonly: '活动名称二',
    decs: '这个活动真好玩',
    created_at: '1590481162000',
    update_at: '1590481162000',
  },
];
export default () => {
  const editorFormRef = useRef<any>();
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([624748504, 624691229]);
  const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]);
  const [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>('bottom');
  const ParamValue = ({ onChange, value, reqParamType, index }: any) => {
    const [inputValue, setInputValue] = useState<any>(value || '');
    const handleInputChange = (v: string) => {
      setInputValue(v);
      onChange(v);
      const data = editorFormRef.current?.getRowData(index);
      if (data) {
        const setData = { title: '123' };
        editorFormRef.current?.setRowData?.(index, { title: '123' });
      }
    };
    return (
      <Input placeholder="请输入值" value={inputValue} onChange={(e) => handleInputChange(e.target.value)} />
    );
  };
  const columns: ProColumns<DataSourceType>[] = [
    {
      title: '列A',
      dataIndex: 'title',
      width: '15%',
    },
    {
      title: '列B',
      dataIndex: 'readonly',
      readonly: true,
      width: '15%',
    },
    {
      title: '列C',
      dataIndex: 'decs',
      renderFormItem: ({ index }: any) => <ParamValue index={index} />,
    },
    {
      title: '活动时间',
      dataIndex: 'created_at',
      valueType: 'date',
    },
  ];
  return (
    <>
      <EditableProTable<DataSourceType>
        rowKey="id"
        headerTitle="可编辑表格"
        editableFormRef={editorFormRef}
        maxLength={5}
        scroll={{
          x: 960,
        }}
        recordCreatorProps={
          position !== 'hidden'
            ? {
                position: position as 'top',
                record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
              }
            : false
        }
        loading={false}
        columns={columns}
        request={async () => ({
          data: defaultData,
          total: 3,
          success: true,
        })}
        value={dataSource}
        onChange={setDataSource}
        editable={{
          type: 'multiple',
          editableKeys,
          onChange: setEditableRowKeys,
        }}
      />
    </>
  );
};

实现起来非常的容易简单,除此之外,EditableProTable(可编辑表格)也提供了其它非常方便的功能,例如操作栏的三大金刚, 保存,删除 和 取消,如果我们要实现复制一行,或者需求只需要的 保存和取消,不需要删除按钮就需要自定义了。大大的提高了编码效率,解决了重复性的工作。

目录
相关文章
如何在 Umi 中使用 Keep Alive
如何在 Umi 中使用 Keep Alive
4350 0
如何在 Umi 中使用 Keep Alive
|
前端开发
antd中table组件中如何进行换行操作(react中)
antd中table组件中如何进行换行操作(react中)
antd中table组件中如何进行换行操作(react中)
使用markdown-it对markdown进行一个实时解析
# 引言 大家应该都接触过markdown笔记吧,我们常常见到很多能写文章的网页提供了一个实时的markdown解析的功能----即我们在一侧写下markdown语法,右边能够实时解析,并将解析后的markdown语法渲染到右侧页面上。非常炫酷实用,那么这是如何实现的呢?今天我们来一起探究一下。 # 开始 首先,我们这个演示学习在Vue3+TypeScript下使用的,所以我们预先建议准备一个Vue3+Typescript工程。 对于markdown的解析,我们可以使用`markdown-it`来进行解析。 比如,我们在左侧设置一个输入框,接收用户markdown输入,我们通过`ma
|
前端开发 计算机视觉
React使用antd实现可编辑单元格
React结合Ant Design实现可编辑单元格的表格组件,通过EditableRow和EditableCell封装实现单元格编辑功能,并提供saveFun回调保存编辑内容。
517 1
|
5月前
|
自然语言处理 前端开发 IDE
用通义灵码全新智能体+MCP实现从设计稿到前端代码,个人免费用
通义灵码全新升级,发布国内首个支持“自主决策+工具链闭环”的编程智能体,面向个人免费!新增功能包括智能体模式、混合推理模型Qwen3支持、全面集成MCP中文社区(涵盖2400+服务)及长期记忆能力。用户可通过IDE插件使用,兼容主流开发环境如JetBrains、VS Code和Visual Studio。教程展示如何将MasterGo设计稿转化为前端代码,简化开发流程。探索链接:[通义灵码官网](https://lingma.aliyun.com/)。
|
10月前
|
人工智能 移动开发 前端开发
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
蚂蚁团队推出的AI前端研发平台WeaveFox,能够根据设计图直接生成前端源代码,支持多种应用类型和技术栈,提升开发效率和质量。本文将详细介绍WeaveFox的功能、技术原理及应用场景。
5702 68
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
|
7月前
|
人工智能 自然语言处理 JavaScript
需要的效果它都有,让AI对话开发效率翻倍!这款Ant Design扩展组件库绝了
ant-design-x-vue 是基于 Ant Design Vue 的扩展组件库,专注于增强聊天和AI交互场景的体验。项目提供开箱即用的对话式UI组件,支持消息气泡、智能建议、思维链展示等特色功能,特别适合快速搭建智能客服、AI助手类应用。
595 5
antd table合并行或者列(动态添加合并行、列)
在Ant Design的Table组件中实现行或列的合并,通过动态计算数据源中的`rowSpan`或`colSpan`属性来控制,支持对特定字段进行行或列合并,包括多选框列的合并处理。
1585 3
antd table合并行或者列(动态添加合并行、列)
|
存储 缓存 前端开发
react怎么只让接口请求一次
react怎么只让接口请求一次
227 0
|
存储 索引
antd中table组件选中单行换样式(比如背景颜色)
在Ant Design (antd)的Table组件中,可以通过设置`onRow`属性来定义行点击事件,从而改变被点击行的样式,如背景颜色。`onRow`是一个函数,返回一个对象,对象包含事件处理函数,如`onClick`。同时,使用`rowClassName`属性来指定行的类名,结合状态管理,可以实现点击某行后改变其背景颜色的效果。具体实现时,需要在组件状态中保存当前被点击行的索引,然后通过`rowClassName`判断并返回相应的类名。
1160 2
antd中table组件选中单行换样式(比如背景颜色)