React antd 表格新增 表格修改 删除 表格数据回显

已于 2023-08-29 17:10:15 修改
阅读量5.3k 收藏 7
点赞数 1
文章标签： react.js 前端 前端框架 javascript
于 2023-06-08 16:09:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42704945/article/details/131109797
版权

在列表中新增修改很常见，react中在新增修改弹窗信息的时候很多时候会遇到点击了列表信息但是弹窗信息还是展示的第一次点击的那条信息，数据并没有更新，点击新增的时候数据也没有清除。在不了解react机制的时候这会带来很大的麻烦和不便，下面我就用两种方式来实现点击列表更新弹窗的信息

第一种，通过数据判断的方式


import {
  addOrUpdSysUser,
  assignUserRoles,
  deleteUser,
  getUserList,
} from '@/pages/Configurate/service';
import { PlusOutlined } from '@ant-design/icons';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button, message, Modal, Space, Tag } from 'antd';
import React, { useRef, useState } from 'react';
import UserForm from '../components/UserForm';
import * as LIST from '../data';
const User: React.FC<Partial<LIST.UserItem>> = () => {
  const actionRef = useRef<ActionType>(null);
  const [formValue, setFormValue] = useState<Partial<LIST.UserItem>>({});
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [isModalOpenState, setIsModalOpenState] = useState<boolean>(false);
  const [isModalOpenAccess, setIsModalOpenAccess] = useState<boolean>(false);
  const [role, setRole] = useState<string[]>([]);
  const [formAccess, setFormAccess] = useState<Record<string, any>>({});

  const columns: ProColumns<LIST.UserItem>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '用户名称',
      dataIndex: 'username',
      copyable: true,
      ellipsis: true,
    },
    {
      title: '联系方式',
      dataIndex: 'phone',
      ellipsis: true,
      search: false,
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
      ellipsis: true,
      search: false,
    },
    {
      title: 'openid',
      dataIndex: 'openid',
      ellipsis: true,
      search: false,
    },
    {
      title: '邀请码',
      dataIndex: 'code',
      ellipsis: true,
      search: false,
    },
    {
      title: '权限',
      dataIndex: 'sysRoleList',
      ellipsis: true,
      search: false,
      render: (_, record) => (
        <Space>
          {record.sysRoleList &&
            record.sysRoleList.map(({ roleName, roleKey }, index) => (
              <Tag color={roleKey ? 'success' : 'processing'} key={index}>
                {roleName}
              </Tag>
            ))}
        </Space>
      ),
    },
    {
      title: '更新时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      ellipsis: true,
      search: false,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      width: 166,
      search: false,
      render: (text, record) => [
        <a
          key="editablee"
          disabled={record.roleIdList.filter((item) => item === '1').length > 0 ? true : false}
          onClick={() => {
            setFormAccess({ roleList: record.roleIdList, userId: record.id });
            setIsModalOpenAccess(true);
            let arr: string[] = [];
            arr = record.roleIdList.filter((item) => item === '1' || item === '5');
            setRole(arr);
          }}
        >
          权限
        </a>,
        <a
          key="editable"
          onClick={() => {
            setFormValue(record);
            setIsModalOpenState(true);
          }}
        >
          编辑
        </a>,
        <a
          onClick={() => {
            Modal.confirm({
              title: '删除',
              content: '确认要删除此数据吗？',
              okText: '确定',
              cancelText: '取消',
              onOk: async () => {
                const { code } = await deleteUser(record.id as number);
                if (code === 200) {
                  message.success('删除成功');
                  actionRef?.current?.reload();
                }
              },
            });
          }}
          key="view"
        >
          删除
        </a>,
      ],
    },
  ];
  return (
    <>
      <PageContainer title={false}>
        <ProTable<LIST.UserItem>
          columns={columns}
          actionRef={actionRef}
          cardBordered
          //自定义参数
          request={async (params = {}) => {
            const { data } = await getUserList(params);
            return data;
          }}
          editable={{
            type: 'multiple',
          }}
          columnsState={{
            persistenceKey: 'pro-table-singe-demos',
            persistenceType: 'localStorage',
            onChange(value) {
              console.log('value: ', value);
            },
          }}
          rowKey="id"
          search={{
            labelWidth: 'auto',
          }}
          options={{
            setting: {
              listsHeight: 400,
            },
          }}
          form={{
            syncToUrl: (values, type) => {
              if (type === 'get') {
                return {
                  ...values,
                };
              }
              return values;
            },
          }}
          pagination={{
            defaultPageSize: 10,
            onChange: (page) => console.log(page),
          }}
          dateFormatter="string"
          toolBarRender={() => [
            <Button
              key="button"
              icon={<PlusOutlined />}
              onClick={() => {
                setFormValue({});
                setIsModalOpen(true);
              }}
              type="primary"
            >
              新建
            </Button>,
          ]}
        />
        <UserForm
          value={{}}
          handleCancel={(flag) => {
            setFormValue({});

            setIsModalOpen(flag);
          }}
          handleOk={async (arg) => {
            const { code, msg } = await addOrUpdSysUser(arg);
            if (code === 200) {
              message.success(msg);
              setIsModalOpen(false);
              //重置form表单数据触发render函数
              setFormValue({});
              if (actionRef?.current) {
                actionRef.current.reload();
              }
            }
          }}
          isModalOpen={isModalOpen}
        />
        {formValue && Object.keys(formValue).length ? (
          <UserForm
            handleCancel={(flag) => {
              setIsModalOpenState(flag);
              setFormValue({});
            }}
            handleOk={async (arg) => {
              const { code, msg } = await addOrUpdSysUser(arg);
              if (code === 200) {
                message.success(msg);
                setIsModalOpenState(false);
                //重置form表单数据触发render函数
                setFormValue({});
                if (actionRef?.current) {
                  actionRef.current.reload();
                }
              }
            }}
            isModalOpen={isModalOpenState}
            value={formValue}
          />
        ) : null}

       
     
      </PageContainer>
    </>
  );
};
export default User;


/*
 * @Date: 2023-05-16 17:39:50
 * @Auth: 463997479@qq.com
 * @LastEditors: 463997479@qq.com
 * @LastEditTime: 2023-05-29 14:46:15
 * @FilePath: \aggregation-system\src\pages\Configurate\components\UserForm.tsx
 */
import { Checkbox, Form, Input, Modal, Select } from 'antd';
import React, { useState } from 'react';
export type IProps = {
  isModalOpen: boolean;
  handleOk: (value: any) => Promise<void>;
  handleCancel: (flag: boolean) => void;
  value: any;
};
const { Option } = Select;
const UserForm: React.FC<IProps> = (props) => {
  const { value, handleOk: handleOk, handleCancel: handleCancel, isModalOpen } = props;
  const [form] = Form.useForm();
  const [roleIdList, setRoleList] = useState<Array<any>>(value.roleIdList);
  const handleSubmit = async () => {
    const res: Record<string, any> = await form.validateFields();
    handleOk({ ...value, ...res });
  };
  const getContent = () => {
    return (
      <>
        <Form.Item
          label="用户名"
          hasFeedback
          name="username"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item
          label="手机号"
          hasFeedback
          name="phone"
          rules={[{ required: false, message: '请输入手机号' }]}
        >
          <Input placeholder="请输入手机号" />
        </Form.Item>
        <Form.Item
          label="城市"
          hasFeedback
          name="city"
          rules={[{ required: false, message: '请输入城市' }]}
        >
          <Input placeholder="请输入城市" />
        </Form.Item>
        {roleIdList && roleIdList.length > 0 && roleIdList.includes('5') ? (
          <Form.Item
            label="内外部"
            hasFeedback
            name="label"
            rules={[{ required: false, message: '请选择类型' }]}
          >
            <Select placeholder="请选择类型">
              <Option value={1}>内部</Option>
              <Option value={2}>外部</Option>
            </Select>
          </Form.Item>
        ) : null}
        <Form.Item name="roleIdList" label="权限">
          <Checkbox.Group
            onChange={(arg) => {
              setRoleList(arg);
            }}
          >
            {value.roleIdList &&
            value.roleIdList.length &&
            (value.roleIdList.includes('2') ||
              value.roleIdList.includes('3') ||
              value.roleIdList.includes('4')) ? (
              <>
                <Checkbox value="2" style={{ lineHeight: '32px' }}>
                  商户
                </Checkbox>
                <Checkbox value="3" style={{ lineHeight: '32px' }}>
                  司机
                </Checkbox>
                <Checkbox value="4" style={{ lineHeight: '32px' }}>
                  游客
                </Checkbox>
              </>
            ) : (
              <>
                <Checkbox value="1" style={{ lineHeight: '32px' }}>
                  超级管理员
                </Checkbox>
                <Checkbox value="5" style={{ lineHeight: '32px' }}>
                  业务员
                </Checkbox>
              </>
            )}
          </Checkbox.Group>
        </Form.Item>
      </>
    );
  };
  return (
    <>
      <Modal
        title={value.id ? '修改' : '新增'}
        width="50%"
        open={isModalOpen}
        onOk={handleSubmit}
        destroyOnClose
        onCancel={() => handleCancel(false)}
      >
        <Form
          name="basic"
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 15 }}
          initialValues={value}
          autoComplete="off"
          form={form}
        >
          {getContent()}
        </Form>
      </Modal>
    </>
  );
};
export default UserForm;

这种方式就是通过判断在点击修改的数据对formValue的值判断只有这个值的key长度不为零才渲染修改的组件，这里采用了两个同一个组件的方式，通过不同的弹窗状态去判断显示是新增还是修。
弹窗中就设置form的initValues就是穿过来的formValue的值，如果是新增的时候就是一个空对象，然后新增的每一项的值填写一个才有一个，如果需要默认值的话就需要设置对象合并{默认值,…value}。

第二种方式


import { PlusOutlined } from '@ant-design/icons';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button, Image, message, Modal, Space, Tag } from 'antd';
import React, { useRef, useState } from 'react';
import setting from '../../../../config/defaultSettings';
import * as LIST from '../data';
import { addOrUpdGoods, deleteGood, putOrLower, queryGoodsList } from '../service';
import MallForm from './components/MallForm';
const Car: React.FC<Partial<LIST.GoodItem>> = () => {
  const actionRef = useRef<ActionType>(null);
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [formValue, setFormValue] = useState();

  const columns: ProColumns<LIST.GoodItem>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '商品名称',
      dataIndex: 'title',
      key: 'condition',
      copyable: true,
      ellipsis: true,
    },

    {
      title: '商品封面',
      dataIndex: 'coverImg',
      ellipsis: true,
      search: false,
      render: (text, record) => {
        let srcImage = record.coverImg || '';
        if (srcImage?.indexOf('http') > -1) {
          srcImage = srcImage?.substring(srcImage?.indexOf('profile') - 1);
        }
        return (
          <>
            <Image width={30} src={setting.url + srcImage} />
          </>
        );
      },
    },
    {
      title: '商品详情',
      dataIndex: 'description',
      ellipsis: true,
      search: false,
    },
    {
      title: '商品数量',
      dataIndex: 'num',
      ellipsis: true,
      search: false,
    },

    {
      title: '兑换积分个数',
      dataIndex: 'score',
      ellipsis: true,
      search: false,
    },

    {
      title: '商品剩余库存',
      dataIndex: 'stockNum',
      ellipsis: true,
      search: false,
    },
    {
      title: '是否限制商品兑换时间',
      dataIndex: 'isLimit',
      ellipsis: true,
      search: false,
      width: 162,
      render: (_, record) => (
        <span color="success">{record.isLimit === '1' ? '限制' : '不限制'}</span>
      ),
    },
    {
      title: '商品状态',
      dataIndex: 'goodsState',
      ellipsis: true,
      valueType: 'select',
      valueEnum: {
        '': { text: '全部', status: '' },
        '1': { text: '上架', status: '1' },
        '2': { text: '下架', status: '2' },
      },
      render: (_, record) => (
        <Space>
          <Tag color="success">{record.goodsState === '1' ? '上架' : '下架'}</Tag>
        </Space>
      ),
    },
    {
      title: '兑换开始时间',
      dataIndex: 'convertStartTime',
      valueType: 'dateTime',
      ellipsis: true,
      search: false,
      width: 162,
    },
    {
      title: '兑换结束时间',
      dataIndex: 'convertEndTime',
      valueType: 'dateTime',
      ellipsis: true,
      search: false,
      width: 162,
    },
    {
      title: '预约时间',
      valueType: 'dateTimeRange',
      ellipsis: true,
      hideInTable: true,
      width: 162,
      search: {
        transform: (value) => {
          if (!value) {
            return '';
          }
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      ellipsis: true,
      search: false,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      width: 126,
      render: (text, record) => [
        <a
          onClick={() => {
            setFormValue(record as any);
            // setIsModalOpenState(true);
            setIsModalOpen(true);
          }}
          key="view"
        >
          编辑
        </a>,
        <a
          key="editablee"
          style={{ color: 'red' }}
          onClick={async () => {
            Modal.confirm({
              title: '删除',
              content: '确定要删除此条数据？',
              okText: '确定',
              cancelText: '取消',
              onOk: async () => {
                const { code } = await deleteGood(record?.id);
                if (code === 200) {
                  message.success('删除成功');
                  actionRef?.current?.reload();
                }
              },
            });
          }}
        >
          删除
        </a>,
        <>
          <a
            onClick={() => {
              Modal.confirm({
                title: `${record.goodsState === '1' ? '下架' : '上架'}`,
                content: `确定要${record.goodsState === '1' ? '下架' : '上架'}?`,
                okText: '确定',
                cancelText: '取消',
                onOk: async () => {
                  const { code } = await putOrLower(record?.id);
                  if (code === 200) {
                    message.success(`${record.goodsState === '1' ? '下架' : '上架'}成功`);
                    actionRef?.current?.reload();
                  }
                },
              });
            }}
            key="viewe"
          >
            {record.goodsState === '1' ? '下架' : '上架'}
          </a>
        </>,
      ],
    },
  ];

  return (
    <>
      <PageContainer title={false}>
        <ProTable<LIST.GoodItem>
          columns={columns}
          actionRef={actionRef}
          cardBordered
          //自定义参数
          params={{}}
          request={async (params = {}) => {
            const { data } = await queryGoodsList(params);
            return data;
          }}
          editable={{
            type: 'multiple',
          }}
          columnsState={{
            persistenceKey: 'pro-table-singe-demos',
            persistenceType: 'localStorage',
            onChange(value) {
              console.log('value: ', value);
            },
          }}
          rowKey="id"
          search={{
            labelWidth: 'auto',
          }}
          options={{
            setting: {
              listsHeight: 400,
            },
          }}
          form={{
            syncToUrl: (values, type) => {
              if (type === 'get') {
                return {
                  ...values,
                };
              }
              return values;
            },
          }}
          pagination={{
            defaultPageSize: 10,
            onChange: (page) => console.log(page),
          }}
          dateFormatter="string"
          toolBarRender={() => [
            <Button
              key="button"
              icon={<PlusOutlined />}
              onClick={() => {
                setFormValue(undefined);
                setIsModalOpen(true);
              }}
              type="primary"
            >
              新建
            </Button>,
          ]}
        />
        <MallForm
          value={formValue || {}}
          isModalOpen={isModalOpen}
          handleCancel={(arg) => {
            setIsModalOpen(arg);
            setFormValue(undefined);
          }}
          handleSubmit={async (arg, resetFields) => {
            console.log(arg);
            const { code, msg } = await addOrUpdGoods({ ...arg });
            if (code === 200) {
              message.success(msg);
              setIsModalOpen(false);
              setFormValue(undefined);
              resetFields();
              if (actionRef?.current) {
                actionRef.current.reload();
              }
            }
          }}
        />
       
      </PageContainer>
    </>
  );
};
export default Car;


import NumericInput from '@/components/Input/input';
import Tage from '@/components/Tag/index';
import Upcload from '@/components/upcload';
import type { RadioChangeEvent } from 'antd';
import { DatePicker, Form, Input, Modal, Radio, Select } from 'antd';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import React, { useEffect, useState } from 'react';
import * as LIST from '../../data';
export type IProps = {
  value: Partial<LIST.GoodItem>;
  isModalOpen: boolean;
  handleCancel: (flag: boolean) => void;
  handleSubmit: (arg: Partial<LIST.GoodItem>, resetFields: () => void) => Promise<void>;
};

const { Option } = Select;
const CarForm: React.FC<IProps> = (props) => {
  const { value, isModalOpen, handleCancel, handleSubmit } = props;
  const [isLimit, setIsLimit] = useState<string>('1');

  const [form] = Form.useForm();
  const resetFields = () => {
    form.resetFields();
  };

  useEffect(() => {
    setIsLimit(value.isLimit ? value.isLimit : '1');
  }, [value]);
  useEffect(() => {
    resetFields();

    form.setFieldsValue({
      labelList: [],
      ...value,
      convertStartTime: value.convertStartTime ? dayjs(value.convertStartTime) : '',
      convertEndTime: value.convertEndTime ? dayjs(value.convertEndTime) : '',
      num: value.num ? value.num + '' : '',
      stockNum: value.stockNum ? value.num + '' : '',
    });
  }, [isModalOpen, value]);
  //清除验证数据

  const handleSubmitOk = () => {
    form.validateFields().then((res: Record<string, any>) => {
      //验证通过后form获取值的数据
      if (res.isLimit === '1') {
        handleSubmit(
          {
            ...value,
            ...res,
            convertStartTime: res['convertStartTime'].format('YYYY-MM-DD HH:mm:ss'),
            convertEndTime: res['convertEndTime'].format('YYYY-MM-DD HH:mm:ss'),
          },
          resetFields,
        );
      } else {
        handleSubmit(
          {
            ...value,
            ...res,
          },
          resetFields,
        );
      }
    });
  };

  

  const handleOnChangeLimit = (arg: RadioChangeEvent) => {
    // setFormValue({ ...formValue, isLimit: arg?.target?.value });
    setIsLimit(arg?.target.value);
  };

  const getContent = (value: Partial<LIST.GoodItem>) => {
    console.log(value);
    return (
      <>
        <Form.Item
          label="商品名称"
          hasFeedback
          name="title"
          rules={[{ required: true, message: '请输入商品名称' }]}
        >
          <Input placeholder="请输入商品名称" />
        </Form.Item>

        <Form.Item
          label="商品详情"
          hasFeedback
          name="description"
          rules={[{ required: true, message: '请输入商品详情' }]}
        >
          <Input placeholder="请输入商品详情" />
        </Form.Item>
        <Form.Item
          label="商品数量"
          hasFeedback
          name="num"
          rules={[{ required: true, message: '请输入商品数量' }]}
        >
          <NumericInput placeholder="请输入商品数量" value={value.num + ''} />
        </Form.Item>
        <Form.Item
          label="兑换积分个数"
          hasFeedback
          name="score"
          rules={[{ required: true, message: '请输入兑换积分个数' }]}
        >
          <NumericInput placeholder="请输入兑换积分个数" value={value.score + ''} />
        </Form.Item>
        <Form.Item
          label="商品状态"
          hasFeedback
          name="goodsState"
          rules={[{ required: true, message: '商品状态' }]}
        >
          <Select placeholder="请选择商品状态">
            <Option value="1">上架</Option>
            <Option value="2">下架</Option>
          </Select>
        </Form.Item>
        <Form.Item
          label="商品封面"
          name="coverImg"
          rules={[{ required: true, message: '商品封面' }]}
        >
          <Upcload type="string" fileNumber={2} />
        </Form.Item>
        <Form.Item
          label="商品图片集合"
          name="goodsImgList"
          rules={[{ required: true, message: '商品图片集合' }]}
        >
          <Upcload fileNumber={1} />
        </Form.Item>
        <Form.Item
          label="标签"
          hasFeedback
          name="labelList"
          rules={[{ required: false, message: '请输入标签' }]}
        >
          <Tage />
        </Form.Item>
        <Form.Item name="isLimit" initialValue="1" label="是否限制商品兑换时间">
          <Radio.Group onChange={(arg) => handleOnChangeLimit(arg)}>
            <Radio value="1">限制</Radio>
            <Radio value="-1">不限制</Radio>
          </Radio.Group>
        </Form.Item>
        {isLimit === '1' ? (
          <>
            <Form.Item
              rules={[{ required: isLimit === '1', message: '商品兑换开始时间' }]}
              name="convertStartTime"
              label="商品兑换开始时间"
            >
              <DatePicker style={{ width: '100%' }} showTime format="YYYY-MM-DD HH:mm:ss" />
            </Form.Item>
            <Form.Item
              rules={[{ required: isLimit === '1', message: '商品兑换结束时间' }]}
              name="convertEndTime"
              label="商品兑换结束时间"
            >
              <DatePicker style={{ width: '100%' }} showTime format="YYYY-MM-DD HH:mm:ss" />
            </Form.Item>
          </>
        ) : null}
        <Form.Item
          label="备注"
          hasFeedback
          name="remark"
          rules={[{ required: false, message: '请输入备注' }]}
        >
          <Input placeholder="请输入备注" />
        </Form.Item>
      </>
    );
  };
  return (
    <>
      <Modal
        title={value.id ? '修改' : '新增'}
        open={isModalOpen}
        width="50%"
        destroyOnClose
        onOk={handleSubmitOk}
        onCancel={() => handleCancel?.(false)}
      >
        <Form
          name="basic"
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 15 }}
          autoComplete="off"
          form={form}
          // initialValues={formValue}
          // onValuesChange={onValuesChange}
        >
          {getContent(value)}
        </Form>
      </Modal>
    </>
  );
};
export default CarForm;

这种方式通过form.resetFields();form.setFieldsValue方式设置form的值

故梦梦
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-ReactTable一个快速轻量级固执己见的React数据表格
08-15
React Table - 一个快速、轻量级、固执己见的React数据表格
antd table按表格里的日期去排序操作
01-18
表格内容 根据票据日期升序（这里是已经排序后的效果） 上代码 代码中data的内容如下 根据paper_date排序，因为目前这种格式不支持比较，需要先转换成时间戳 new Date(aTimeString).getTime() 之后再用装换后的时间戳去比较，比较用到的函数是 .sort，一下是用来比较的代码 data.sort(function(a, b) { let aTimeString = a.paper_date; let bTimeString = b.paper_date; let aTime = new Date(aTimeStr
React 全自动数据表格组件——BodeGrid的实现思路
12-12
表格是在后台管理系统中用的最频繁的组件之一，相关的功能有数据的新增和编辑、查询、排序、分页、自定义显示以及一些操作按钮。我们逐一深入进行探讨以及介绍我的设计思路： 表格是在后台管理系统中用的最频繁的组件之一，相关的功能有数据的新增和编辑、查询、排序、分页、自定义显示以及一些操作按钮。我们逐一深入进行探讨以及介绍我的设计思路： 新增和编辑 想想我们最开始写新增编辑页面是怎么做的，是不是一个页面一个页面的写，然后要么表单提交要么Ajax提交。后台有无数个新增和编辑的视图页，现在想想真是恐怖啊，看着都累。后面接触到kendoui的grid组件，看到只需要配置列的属性以及保存的地址就能自动完成新增和编
antd form表单数据回显操作
01-22
index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, Modal, } from 'antd'; const Option = Select.Option; import AddOrEdit from './AddOrEdit ' class List extends React.Component { constructor(props) { super(pr
React Ant Design树形表格的复杂增删改操作
01-18
最近因为业务接触了antd，使用antd完成一个复杂的树形表格的显示以及修改。在这其中遇见了不少坑，很多功能antd只写了初步的功能，更为细化的功能只能自己完善。踩过的坑都写在了这里。 树形表格的显示 在antd中对于表格的key值有着严格的控制，每一个row都必须有一个独一无二的key值，可以是数字也可以是字符串。这一点和我曾经使用过得iview有着很大的区别。react使用key来代表每一行是为了避免重新渲染的问题，这个优化也在实际的开发中带来了不少的问题。比如新建行时需要自定义新key。 下面直接上一下代码及代码效果，这是一个三级的树形表格，且其中包含二级标题。 最终效果 ​ colu
react实例-增删改查 人员管理系统
01-09
react实例-增删改查 人员管理系统 有编译后的可直接运行的html文件，也有react组件后的js文件
【React】单纯使用React实现增删改查
qq_46105844的博客
08-04 4393
这篇文章适合初学者，简单利用 table 实现了增删改查功能。 这次的代码直接导入即可使用，简单上手，加油~~~~~~今天的内容就到这里啦，之后学到的会继续分享。
react Form.List+自定义组件 数据回显问题
一起学习前端知识，一起成为前端开发工程师！
03-09 1162
最近一直头疼于如何回显Form.List数据，经过3天的不懈努力，总结经验，最终得出结论。我们需要对一个表单数据进行修改，表单数据会自动回显，通过控制台我们可以查到form确实取到数据了，普通formitem的数据能正常回显，但是 自定义组件数据却没显示到页面上。由于自定义组件被包含于formlist中，导致结构复杂，难以分析。 可以看出，formlist组件接收到2条数据，页面也能够正常渲染出2个自定义组件（下拉+时间选择）证明formlist中的fileds是能够获取到数据的，对于为什么没有将数据展
【React+antd】React结合antd实现表格的增删改查
qq_46105844的博客
07-22 4833
采用 React + Antd + JavaScript + axios ，完成了简单Table的增删改查功能
react 表格
最新发布
cccbbbmmm的博客
09-12 246
React 表格是在 React 应用程序中呈现和操作表格数据的常见任务。您可以使用 React 的组件化和状态管理功能来创建灵活且可重用的表格组件。在 React 中，您可以使用 JSX 语法编写表格的结构。组件传递不同的数据属性来在应用程序中使用这个表格组件。组件中定义了要在表格中显示的数据数组。该属性是一个包含表格数据的数组。在上面的示例中，我们创建了一个名为。的函数式组件，它接受一个名为。组件，以在应用程序中呈现表格。元素来显示每个数据字段的值。在组件的结构中，我们使用。在上面的示例中，我们在。
React实现表单数据的添加与删除
热门推荐
zhou_xiao_cheng的博客
09-01 1万+
最近在学习React,做了一个简单的Demo，写成博客，用以自勉。Demo功能：在输入框中输入数据后，点击保存按钮，数据将会逐一显示在输入框下方，点击保存后显示的任何一条数据，该数据即可被删除。
react 使用antd（4.x） Modal关闭弹框清空数据问题
fankeweiii的博客
03-30 3059
react 使用antd Modal关闭弹框清空数据问题
在react项目中使用 antd-Table,实现动态表格数据修改
HuangGuanShanYai的博客
08-30 1万+
index.state.js中可以写 import { observable, action, toJS } from ‘mobx’; class State { @observable data = []; @observable columns = [ { title: ‘name’, dataIndex: ‘name’, width: ‘25%’, editable: true }, { t...
React+antd中form的创建和编辑使用同一组件的回显问题
rock_23的博客
10-12 2706
React+antd中form的创建和编辑使用同一组件的回显问题 笔记中的需求讲解： 创建和编辑都是antd中的modal弹框，弹框的内容那是form表单，所以创建不用说，重点则是编辑时的回显。创建和编辑就传个不同值来区别什么时候是创建，什么时候是编辑就好了，笔记不细说了。 React: 使用父传子的形式： 直接可以在componentWillMount这个生命周期中就能拿到数据，然后是用antd——form的一个属性：setFieldsValue设置name就????了。 componentWillMou
React项目之编辑时表单数据回显——2022-06-23
m0_51400566的博客
06-23 2480
React实战项目成长记
搜遍全网都没搜到的proTable实现表单查询功能
随手记的笔记
06-30 1040
搜遍全网都没搜到的proTable实现表单查询功能
【React事件+表单的使用+函数组件】
fcc627的博客
08-24 724
自定义Hooks：在应用中可以将一些需要重复使用的逻辑自定义成Hook示例：自定义一个Hook，返回一个和滚动条位置实时同步的stateimport {//获取window窗口的垂直滚动条 setScrollY(window . scrollY) } useEffect(() => {//注册监听 return() => {window . removeEventListener('scroll' , scroll) //注销监听 } } , [ ]);{{
React之antd Form回显数据
yingzizizizizizzz的专栏
01-27 4520
转自：https://blog.csdn.net/welkin_qing/article/details/110004969 文章目录 一、antd4如何回显数据 1. 定义变量 2. 保存接口数据到form变量中 3. form显示数据 4. 表单提交数据 onFinish 二、antd3如何回显数据 1. 引入FormComponentProps 2. 设置interface 3. 设置组件 4. 定义getFieldDecorator和setFieldsV
react-antd中表格的使用(数据的请求，带删除功能的表格)
weixin_45745641的博客
04-03 5314
最近在学习react-antd框架，表格这一块在项目中的使用频率很高，最近在学习这一块的内容，所以记录一下
antd表格嵌套表格
06-01
Ant Design的表格组件支持嵌套表格功能。具体可以通过以下步骤实现： 1. 在columns数组中，添加一个子表格的render方法。该方法返回一个新的表格组件，其中columns属性为子表格的列。 2. 在父表格的dataSource数据中，为每一个需要展示子表格的行添加一个children属性。该属性为一个数组，包含子表格中的数据。同时，子表格数据的格式也需要与父表格数据的格式一致。 下面是一个简单的示例代码： ``` import React, { useState } from 'react'; import { Table } from 'antd'; const columns = [ { title: '姓名', dataIndex: 'name', key: 'name' }, { title: '年龄', dataIndex: 'age', key: 'age' }, { title: '地址', dataIndex: 'address', key: 'address' }, { title: '操作', dataIndex: '', key: 'x', render: () => <a>展开</a>, }, ]; const data = [ { key: 1, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', children: [ { key: 11, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: 12, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ], }, { key: 2, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ]; const NestedTable = () => { const [expandedRowKeys, setExpandedRowKeys] = useState([]); const onExpand = (expanded, record) => { if (expanded) { setExpandedRowKeys([...expandedRowKeys, record.key]); } else { setExpandedRowKeys(expandedRowKeys.filter((key) => key !== record.key)); } }; return ( <Table columns={columns} dataSource={data} expandedRowKeys={expandedRowKeys} onExpand={onExpand} rowKey="key" expandable={{ expandedRowRender: (record) => ( <Table columns={columns} dataSource={record.children} rowKey="key" /> ), }} /> ); }; export default NestedTable; ``` 在这个示例中，我们创建了一个包含两行数据的父表格。第一行数据包含一个子表格，我们使用了children属性为其指定子表格数据。同时，在columns数组中添加了一个render方法，用于展示子表格。在父表格组件中，我们使用了antd的expandable属性，指定了展开子表格的方式和渲染方法。 希望这个示例能够帮助你了解如何在Ant Design的表格组件中实现嵌套表格功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值