关于antdpro的EdittableProTable编辑时两个下拉搜索框的数据联动以及数据回显（以及踩坑）

已于 2023-10-20 09:40:28 修改
阅读量1.3k 收藏 3
点赞数 1
分类专栏： 项目 前端学习 文章标签： javascript 前端 开发语言 react ant-design
于 2023-10-20 09:39:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44179024/article/details/133918661
版权

需求：使用antdpro的editprotable编辑两个下拉框，且下拉框是一个搜索下拉框。下拉框1和2的值是一个编码和名字的联动关系，1变化会带动2，2变化会带动1的一个联动作用。（最后有略完整的代码，但是因为公司项目问题，删掉了一些不必要的代码，不确保运行成功）

在这里插入图片描述

我使用的是renderFormItem进行渲染Select，并绑定了form

修改对应的下拉框数据不难，但是数据回显比较难，我网上看了好多，很多是说绑定form，用form.setfieldValue，但是我一直失败显示不出来，网上也没搜到我这个回显的方法，官方文档也写得很少。

最后是试出来的方式。

1、使用antdpro的EdittableProTable

<EditableProTable<AdminAccountItem>
            columns={columns}
            actionRef={actionRef}
            cardBordered
            form={tableForm}
            request={async (params = {}, sort, filter) => {
                console.log(sort, filter);
                // await waitTime(2000);
                setExParam(params as unknown as AdminAccountItem);
                return request<{
                    data: AdminAccountItem[];
                }>('/getList', {
                    params,
                }).then(res => {
                    setListData(res.data)
                    return res
                });
            }}
            editable={{
                form: tableForm,
                editableKeys,
                // type: 'multiple',
                onSave: async (rowKey, data, row) => {
                    // console.log('============', tableForm.getFieldsValue[editableKeys[0]]());
                    console.log('row', data);
                    await adminApi.updateAdmin(data)
                  },
                onCancel:async () => {
                    
                },
                onChange: setEditableRowKeys,
                // 设置编辑只留保存和取消按钮
                actionRender: (row, config, dom) => [dom.save, dom.cancel],
              }}
            value={listData}
            onChange={setListData}
            columnsState={{
                persistenceKey: 'pro-table-singe-demos',
                persistenceType: 'localStorage',
                onChange(value) {
                    console.log('value: ', value);
                },
            }}
            rowKey="id"
            search={{
                labelWidth: 'auto',
            }}
            options={{
                setting: {
                    listsHeight: 400,
                },
            }}

            form={{
                // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
                syncToUrl: (values, type) => {
                    if (type === 'get') {
                        return {
                            ...values,
                            created_at: [values.startTime, values.endTime],
                        };
                    }
                    return values;
                },
            }}
            pagination={{
                pageSize: 10,
                onChange: (page) => console.log(page),
            }}
            // toolbar={{
            //     actions: []
            // }}
            dateFormatter="string"
            headerTitle="管理员列表"
        >
        </EditableProTable>

这里面比较重要的参数一个就是
这两个决定了在表格中点击编辑修改然后保存之后，数据会不会回显到表格中（我前面看了很多教程把onchange注释掉了所以修改后一直回显不出来，走了蛮多弯路）

value={listData}
onChange={setListData}

还有一个就是edittable了，里面最重要的就是
form：tableForm

const [tableForm] = Form.useForm<AdminAccountItem>();

form在数据联动起很重要的作用，但是也因为它的用法，普通表单容易修改，但是用在列表中，找不到用法，走了很多弯路。

还有一个就是编辑行的key值，也是你table设置的key值，editableKeys，其他可以看看官网

const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([])

这个在后面数据联动和tableForm一起使用起到重要作用。

editable={{
                form: tableForm,
                editableKeys,
                // type: 'multiple',
                onSave: async (rowKey, data, row) => {
                    // console.log('============', tableForm.getFieldsValue[editableKeys[0]]());
                    console.log('row', data);
                    await adminApi.updateAdmin(data)
                  },
                onCancel:async () => {
                    
                },
                onChange: setEditableRowKeys,
                // 设置编辑只留保存和取消按钮
                actionRender: (row, config, dom) => [dom.save, dom.cancel],
              }}

2、表格column的设置

我这里需要修改的是组织id和组织名称
设置两个onSelect选中时获取远程数据

{
            title: '组织ID',
            dataIndex: 'orgId',
            copyable: true,
            ellipsis: true,
            hideInSearch: true,
            valueType: 'select',
            renderFormItem: (_, data, form) => {
                return (
                        <Select
                            options={orgOptions}
                            showSearch={true}
                            onSelect={onOrgIdSelect}
                            onSearch={(value) => getList('orgId', value)}
                            >
                        </Select>
                )
            },
            render: (_, data) => {
                return <div>{data.orgId}</div>
            }
        },
        {
            title: '组织名称',
            dataIndex: 'namePath',
            copyable: true,
            ellipsis: true,
            hideInSearch: true,
            valueType: 'select',
            renderFormItem: (_, data, from) => {

                return (
                        <Select                        
                            options={orgNameOptions}
                            showSearch={true}
                            onSelect={onOrgNameSelect}
                            onSearch={(value) => getList('orgName', value)}
                            >
                        </Select>
                )
            },
            render: (_, data) => {
                return <div>{data.namePath}</div>
            }
        },
        {
            title: '操作',
            valueType: 'option',
            key: 'option',
            render: (text, record, _, action) => [
                <a
                    key="editable"
                    onClick={() => {
                    action?.startEditable?.(record.id);
                    setOrgOptions([])
                    setOrgNameOptions([])
                    }}
                >
                    编辑
                </a>
            ],
        },

3、用到的方法

这里是两个onSelect以及获取下拉框数据，来自同一个接口
但为了区分数据回显的两个下拉框，因为一个是id一个是name的显示，所以我设置的两个Select的options数据value和label都分别是相同的，所以获取数据分了id和name的区别（还有个原因是我用官网的下拉搜索框的组件一直有点问题）

 // 获取下拉框数据
    const getList = debounce(((selectName: string, param: string| undefined)=> {
        // 组织名称筛选时-正则匹配获取参数最后的组织id
        var regex1 = /(?<=\（)(.+?)(?=\）)/g;; 
        if(param?.match(regex1) !== null ) {
           let res: string| undefined = param?.match(regex1)?.[0] 
           param = res
        }
        // 下拉框是组织id
        if(selectName == 'orgId') {
          return adminApi.getDept({searchDept: param}).then((response: any) => {
            // 当组织名称被选中，数据则只有一条
            if(response.data.length == 1) {
                console.log(tableForm.getFieldsValue());
                // 设置组织id名称变化
                tableForm.setFieldsValue({
                    [editableKeys[0] as number] : {
                        'orgId': response.data[0].value
                    }
                    
                })
              }
              response.data?.map((item: selectValueType) => {
                item.label = item.value
              })
              setOrgOptions(response.data)
              
            })
          }
          // 下拉框是组织名称
          if(selectName == 'orgName') {
            return adminApi.getDept({searchDept:param}).then((response: any) => {
                // 设置
                if(response.data.length == 1) {
                    tableForm.setFieldsValue({
                        [editableKeys[0] as number] : {
                            'namePath': response.data[0].label
                        }
                        
                    })
                  }
                response.data?.map((item: selectValueType) => {
                    item.value = item.label;
                  })
                setOrgNameOptions(response.data)
              })
            }
    }), 800)

    const onOrgIdSelect = async (selected: string) => {
        await getList('orgName', selected)
    }
    const onOrgNameSelect = async (selected: string) => {
        await getList('orgId', selected)
    }

踩到的坑

其中数据回显的使用，注意tableForm.setFieldsValue的使用
我之前就是一直在这里踩坑，一直回显不出来，后面打印了
tableForm.getFieldsValue()才知道，这个tableForm里面，因为外层是table包裹的form，而且编辑的是行，所以外层包裹了一层key值，我这里因为设置table的key值是id是个数字，所以是这样设置才生效了。

tableForm.setFieldsValue({
                    [editableKeys[0] as number] : {
                        'orgId': response.data[0].value
                    }
                    
                })

还有一些数据回显设置
比如 if(response.data.length == 1)
这里是因为是下拉搜索框，所以在我选择某一下拉框后，根据选中的value搜索另一个下拉框的值，因为二者是一一对应的关系，所以对应另一个下拉框也应该只有一个，所以直接设置另一个下拉框是第一个值

4、完整代码

import {DownloadOutlined, EllipsisOutlined, PlusOutlined} from '@ant-design/icons';
import type {ActionType, ProColumns} from '@ant-design/pro-components';
import {
    ModalForm,
    ProForm,
    ProFormDateRangePicker,
    ProFormSelect,
    ProFormText,
} from '@ant-design/pro-components';
import {ProTable, EditableProTable,TableDropdown,} from '@ant-design/pro-components';
import {Button, Dropdown, Space, Tag, Form, message, Select, Divider, Popconfirm, Input} from 'antd';
import React, {SetStateAction, useEffect, useRef, useState} from 'react';
import request from 'umi-request';
import adminApi from "@/services/admin"; 
import {DefaultOptionType} from 'antd/es/select';
import {ProFormItem, ProFormItemProps} from "@ant-design/pro-form";
import {useModel} from "@@/exports";

import debounce from 'lodash/debounce';
export const waitTimePromise = async (time: number = 100) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, time);
    });
};

export const waitTime = async (time: number = 100) => {
    await waitTimePromise(time);
};

type AdminAccountItem = {
    url: string;
    username: string;
    staffName: string;
    roleName: string;
    orgId: string;
    namePath: string;
    id: number;
    number: number;
    title: string;
    labels: {
        name: string;
        color: string;
    }[];
    state: string;
    comments: number;
    created_at: string;
    updated_at: string;
    closed_at?: string;
};

type saveAdminDataType = {
    roleId: string;
    staffId: string;
    orgId: string;
}

interface selectValueType {
    label: string;
    value: string;
}

export default () => {

    const [tableForm] = Form.useForm<AdminAccountItem>();



    const [listData, setListData] = useState<readonly AdminAccountItem[]>()
    const [exportParam, setExParam] = useState<AdminAccountItem>();

    // 组织id下拉框数据
    const [orgOptions, setOrgOptions] = useState<selectValueType[]>([]);
    // 组织名称下拉框数据
    const [orgNameOptions, setOrgNameOptions] = useState<selectValueType[]>([]);
    
 const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([])
    // 获取下拉框数据
    const getList = debounce(((selectName: string, param: string| undefined)=> {
        // 组织名称筛选时-正则匹配获取参数最后的组织id
        var regex1 = /(?<=\（)(.+?)(?=\）)/g;; 
        if(param?.match(regex1) !== null ) {
           let res: string| undefined = param?.match(regex1)?.[0] 
           param = res
        }
        // 下拉框是组织id
        if(selectName == 'orgId') {
          return adminApi.getDept({searchDept: param}).then((response: any) => {
            // 当组织名称被选中，数据则只有一条
            if(response.data.length == 1) {
                console.log(tableForm.getFieldsValue());
                // 设置组织id名称变化
                tableForm.setFieldsValue({
                    [editableKeys[0] as number] : {
                        'orgId': response.data[0].value
                    }
                    
                })
              }
              response.data?.map((item: selectValueType) => {
                item.label = item.value
              })
              setOrgOptions(response.data)
              
            })
          }
          // 下拉框是组织名称
          if(selectName == 'orgName') {
            return adminApi.getDept({searchDept:param}).then((response: any) => {
                // 设置
                if(response.data.length == 1) {
                    tableForm.setFieldsValue({
                        [editableKeys[0] as number] : {
                            'namePath': response.data[0].label
                        }
                        
                    })
                  }
                response.data?.map((item: selectValueType) => {
                    item.value = item.label;
                  })
                setOrgNameOptions(response.data)
              })
            }
    }), 800)

    const onOrgIdSelect = async (selected: string) => {
        await getList('orgName', selected)
    }
    const onOrgNameSelect = async (selected: string) => {
        await getList('orgId', selected)
    }
    const columns: ProColumns<AdminAccountItem>[] = [
        {
            title: '组织ID',
            dataIndex: 'orgId',
            copyable: true,
            ellipsis: true,
            hideInSearch: true,
            valueType: 'select',
            renderFormItem: (_, data, form) => {
                return (
                        <Select
                            options={orgOptions}
                            showSearch={true}
                            onSelect={onOrgIdSelect}
                            onSearch={(value) => getList('orgId', value)}
                            >
                        </Select>
                )
            },
            render: (_, data) => {
                return <div>{data.orgId}</div>
            }
        },
        {
            title: '组织名称',
            dataIndex: 'namePath',
            copyable: true,
            ellipsis: true,
            hideInSearch: true,
            valueType: 'select',
            renderFormItem: (_, data, from) => {

                return (
                        <Select                        
                            options={orgNameOptions}
                            showSearch={true}
                            onSelect={onOrgNameSelect}
                            onSearch={(value) => getList('orgName', value)}
                            >
                        </Select>
                )
            },
            render: (_, data) => {
                return <div>{data.namePath}</div>
            }
        },
        {
            title: '操作',
            valueType: 'option',
            key: 'option',
            render: (text, record, _, action) => [
                <a
                    key="editable"
                    onClick={() => {
                    action?.startEditable?.(record.id);
                    setOrgOptions([])
                    setOrgNameOptions([])
                    }}
                >
                    编辑
                </a>
            ],
        },
    ];
    
    
   

    return (

        <EditableProTable<AdminAccountItem>
            columns={columns}
            actionRef={actionRef}
            cardBordered
            form={tableForm}
            request={async (params = {}, sort, filter) => {
                console.log(sort, filter);
                // await waitTime(2000);
                setExParam(params as unknown as AdminAccountItem);
                return request<{
                    data: AdminAccountItem[];
                }>('getAdminAccount', {
                    params,
                }).then(res => {
                    setListData(res.data)
                    return res
                });
            }}

            editable={{
                form: tableForm,
                editableKeys,
                // type: 'multiple',
                onSave: async (rowKey, data, row) => {
                    console.log('row', data);
                    await adminApi.updateAdmin(data)
                  },
                onCancel:async () => {
                    
                },
                onChange: setEditableRowKeys,
                // 设置编辑只留保存和取消按钮
                actionRender: (row, config, dom) => [dom.save, dom.cancel],
              }}
            value={listData}
            onChange={setListData}
            columnsState={{
                persistenceKey: 'pro-table-singe-demos',
                persistenceType: 'localStorage',
                onChange(value) {
                    console.log('value: ', value);
                },
            }}
            rowKey="id"
            search={{
                labelWidth: 'auto',
            }}
            options={{
                setting: {
                    listsHeight: 400,
                },
            }}

            form={{
                // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
                syncToUrl: (values, type) => {
                    if (type === 'get') {
                        return {
                            ...values,
                            created_at: [values.startTime, values.endTime],
                        };
                    }
                    return values;
                },
            }}
            pagination={{
                pageSize: 10,
                onChange: (page) => console.log(page),
            }}
            dateFormatter="string"
            headerTitle="管理员列表"
        >
        </EditableProTable>

    );
};
兔头迟早要秃头
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决Antd vue下拉框卡顿问题
10-17
封装好的组件，下载即用
Ant-Design-Pro-Components： EditableProTable、ProTable组件数据联动。
~~~
06-19 1448
Ant-Design-Pro-Components： EditableProTable、ProTable组件数据联动。
总结一下react+ant-designPro+EditableProTable遇到的问题
最新发布
pspsps99的博客
10-19 450
editable，配置，有很多可以看官方文档，editableKeys,onChange:setEditableKeys必须加上，onSave是点击保存的事件，onDelete是点击删除的事件。actionRef一定要与可编辑框的actionRef对应，这里的id必须要唯一，所以我使用随机数，‘new’是我后期判断的标志而已。比如编辑按钮点击无效，无法保存等，都是key出了问题，一定要保持key唯一，且一定要有key。rowKey，你的每一行以什么为key，我用的是id，就是上面的‘new’+随机数，
ant design pro 可编辑表格
wxl095的博客
09-08 1003
import React, {useRef,} from 'react'; import {PageHeaderWrapper} from '@ant-design/pro-layout'; import {ProColumns, ActionType, TableDropdown} from '@ant-design/pro-table'; import ProTable from '@ant-design/pro-table'; import {index} from './service'; typ
layui实现下拉复选功能的例子(包括数据的回显与上传)
10-16
今天小编大家分享一篇layui实现下拉复选功能的例子(包括数据的回显与上传)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
edittable插件，可编辑表格示例
05-16
edittable插件，可编辑表格示例，基于jQuery实现的EditTable可编辑表格插件
Ant Design Pro使用之--EditableProTable 可编辑表格
weixin_62192841的博客
10-27 8883
EditableProTable 可编辑表格的一些些总结和实践，对于其相关属性：recordCreatorProps和editable及columns配置写了些自己的理解，以作记录和参考
【antd组件之ProTable，EditableProTable】
小蓝人的博客
01-16 6113
【代码】【antd组件之ProTable，EditableProTable】
使用EditTable实现可编辑列表
一颗橘子的博客
06-10 2011
使用BootStrap中的EditTable插件实现可编辑列表 业务要求：列表中部分列可以通过点击后直接编辑
可编辑表格EditableProTable学习
weixin_67150966的博客
03-14 720
可编辑表格EditableProTable学习
layui table数据修改的回显方法
12-10
实现的样式给你们看一波 点击这锅按钮 其实回显就是一个赋值的操作，先把form表单的那些input 框的id拿到，在展示成功的那里进行绑值 table.on('tool(test)', function(obj) { var data = obj.data; // 获得当前行数据 var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的event 参数对应的值） var tr = obj.tr; // 获得当前行 tr 的DOM对象 if (layEvent === 'plan') {//修改操作 var data =
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
thymeleaf回显数据
01-08
1.单选框： 显示 隐藏 显示 隐藏 2.下拉框： 用户 请选择用户 3.input回填 客户姓名： 4.时间 出生日期： 作者：饿饿……
layui表格数据复选框回显设置方法
12-04
layui2.3版本，本身并不带有复选框回显功能，那么需要从源头解决此事，F12代码调试，找到与复选框关联的地方发现： 我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显。 layui这里有一个坑，设置class属性后会造成二次点击效果，千万不要手动修改class属性，那么应该怎么办呢？ 每次**点击**其中一个复选框时都会增加一个class属性，第二次点击又会给删除： table.render({ elem: '#LAY_table_topic', url: '/admin/topicHandle/getTopicList', height: 600, done:f
react-ant-dropdown-menu:下拉菜单+基于antd的菜单
03-06
React物下拉菜单 下拉菜单基于antd。 安装 npm install -S @jswork/react-ant-dropdown-menu 特性 姓名 类型 必需的 默认 描述 班级名称 细绳 错误的 -- menuOptions 形状 错误的 -- 用法 导入css @import " ~@jswork/react-ant-dropdown-menu/dist/style.css " ; // or use sass @import " ~@jswork/react-ant-dropdown-menu/dist/style.scss " ; // customize your styles: $react-ant-dropdown-menu-options : () 导入js import ReactDemokit from '@jswork/react-demokit'
基于layui的下拉列表的数据回显方法
10-16
今天小编就为大家分享一篇基于layui的下拉列表的数据回显方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解关于element级联选择器数据回显问题
10-17
主要介绍了详解关于element级联选择器数据回显问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决element ui select下拉框不回显数据问题的解决
10-17
主要介绍了解决element ui select下拉框不回显数据问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
EditableProTable组件(控制数据的位置以及是否可以进行操作)
m0_58293192的博客
05-03 644
EditableProTable组件(控制数据的位置以及是否可以进行操作)
vue下拉多选框怎么回显数据
06-06
要回显数据，你需要在你的Vue组件中绑定一个数组，用来保存用户选择的选项。比如，你可以在data选项中定义一个名为selectedOptions的数组。然后，在你的下拉多选框中，使用v-model指令将选中的选项绑定到这个数组上。例如： ```html <template> <div> <label for="options">请选择：</label> <select id="options" v-model="selectedOptions" multiple> <option v-for="option in options" :value="option">{{ option }}</option> </select> </div> </template> <script> export default { data() { return { options: ['选项1', '选项2', '选项3'], selectedOptions: ['选项1', '选项3'] // 假设这是要回显的数据 } } } </script> ``` 在上面的代码中，我们使用了v-model指令将选中的选项绑定到了selectedOptions数组中，并且在data选项中定义了一个默认值，假设这是要回显的数据。 这样，当用户进入页面时，可以看到默认选中的选项已经被回显出来了。你也可以通过其他方式，如AJAX请求，将需要回显的数据动态地设置到selectedOptions数组中，以达到动态回显数据的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值