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

2023-10-20 14:20
文章标签 数据 搜索 编辑 联动 两个 回显 antdpro edittableprotable

本文主要是介绍关于antdpro的EdittableProTable编辑时两个下拉搜索框的数据联动以及数据回显（以及踩坑），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

在这里插入图片描述

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

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

最后是试出来的方式。

1、使用antdpro的EdittableProTable

<EditableProTable<AdminAccountItem>columns={columns}actionRef={actionRef}cardBorderedform={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 (<Selectoptions={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) => [<akey="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)=> {// 组织名称筛选时-正则匹配获取参数最后的组织idvar regex1 = /(?<=\（)(.+?)(?=\）)/g;; if(param?.match(regex1) !== null ) {let res: string| undefined = param?.match(regex1)?.[0] param = res}// 下拉框是组织idif(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)=> {// 组织名称筛选时-正则匹配获取参数最后的组织idvar regex1 = /(?<=\（)(.+?)(?=\）)/g;; if(param?.match(regex1) !== null ) {let res: string| undefined = param?.match(regex1)?.[0] param = res}// 下拉框是组织idif(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 (<Selectoptions={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) => [<akey="editable"onClick={() => {action?.startEditable?.(record.id);setOrgOptions([])setOrgNameOptions([])}}>编辑</a>],},];return (<EditableProTable<AdminAccountItem>columns={columns}actionRef={actionRef}cardBorderedform={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>);
};

这篇关于关于antdpro的EdittableProTable编辑时两个下拉搜索框的数据联动以及数据回显（以及踩坑）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/247695。

相关文章

Python在二进制文件中进行数据搜索的实战指南

Python在二进制文件中进行数据搜索的实战指南

《Python在二进制文件中进行数据搜索的实战指南》在二进制文件中搜索特定数据是编程中常见的任务,尤其在日志分析、程序调试和二进制数据处理中尤为重要,下面我们就来看看如何使用Python实现这一功能吧... 目录简介1. 二进制文件搜索概述2. python二进制模式文件读取（rb）2.1 二进制模式与文本
阅读更多...
C#实现将XML数据自动化地写入Excel文件

C#实现将XML数据自动化地写入Excel文件

《C#实现将XML数据自动化地写入Excel文件》在现代企业级应用中,数据处理与报表生成是核心环节,本文将深入探讨如何利用C#和一款优秀的库,将XML数据自动化地写入Excel文件,有需要的小伙伴可以... 目录理解XML数据结构与Excel的对应关系引入高效工具：使用Spire.XLS for .NETC
阅读更多...
MySQL数据目录迁移的完整过程

MySQL数据目录迁移的完整过程

《MySQL数据目录迁移的完整过程》文章详细介绍了将MySQL数据目录迁移到新硬盘的整个过程,包括新硬盘挂载、创建新的数据目录、迁移数据（推荐使用两遍rsync方案）、修改MySQL配置文件和重启验证... 目录1，新硬盘挂载（如果有的话）2，创建新的 mysql 数据目录3，迁移 MySQL 数据（推荐两
阅读更多...
Python数据验证神器Pydantic库的使用和实践中的避坑指南

Python数据验证神器Pydantic库的使用和实践中的避坑指南

《Python数据验证神器Pydantic库的使用和实践中的避坑指南》Pydantic是一个用于数据验证和设置的库,可以显著简化API接口开发,文章通过一个实际案例,展示了Pydantic如何在生产环... 目录1️⃣ 崩溃时刻：当你的API接口又双叒崩了！2️⃣ 神兵天降：3行代码解决验证难题3️⃣ 深度
阅读更多...
MySQL快速复制一张表的四种核心方法(包括表结构和数据)

MySQL快速复制一张表的四种核心方法(包括表结构和数据)

《MySQL快速复制一张表的四种核心方法(包括表结构和数据)》本文详细介绍了四种复制MySQL表（结构+数据）的方法,并对每种方法进行了对比分析,适用于不同场景和数据量的复制需求,特别是针对超大表（1... 目录一、mysql 复制表（结构+数据）的 4 种核心方法（面试结构化回答）方法 1：CREATE
阅读更多...
详解C++ 存储二进制数据容器的几种方法

详解C++ 存储二进制数据容器的几种方法

《详解C++存储二进制数据容器的几种方法》本文主要介绍了详解C++存储二进制数据容器,包括std::vector、std::array、std::string、std::bitset和std::ve... 目录1.std::vector<uint8_t>（最常用）特点：适用场景：示例：2.std::arra
阅读更多...
MySQL中的DELETE删除数据及注意事项

MySQL中的DELETE删除数据及注意事项

《MySQL中的DELETE删除数据及注意事项》MySQL的DELETE语句是数据库操作中不可或缺的一部分,通过合理使用索引、批量删除、避免全表删除、使用TRUNCATE、使用ORDERBY和LIMI... 目录1. 基本语法单表删除2. 高级用法使用子查询删除删除多表3. 性能优化策略使用索引批量删除避免
阅读更多...
MySQL 数据库进阶之SQL 数据操作与子查询操作大全

MySQL 数据库进阶之SQL 数据操作与子查询操作大全

《MySQL数据库进阶之SQL数据操作与子查询操作大全》本文详细介绍了SQL中的子查询、数据添加（INSERT）、数据修改（UPDATE）和数据删除（DELETE、TRUNCATE、DROP）操作... 目录一、子查询：嵌套在查询中的查询1.1 子查询的基本语法1.2 子查询的实战示例二、数据添加：INSE
阅读更多...
Linux服务器数据盘移除并重新挂载的全过程

Linux服务器数据盘移除并重新挂载的全过程

《Linux服务器数据盘移除并重新挂载的全过程》：本文主要介绍在Linux服务器上移除并重新挂载数据盘的整个过程,分为三大步：卸载文件系统、分离磁盘和重新挂载,每一步都有详细的步骤和注意事项,确保... 目录引言第一步：卸载文件系统第二步：分离磁盘第三步：重新挂载引言在 linux 服务器上移除并重新挂p
阅读更多...
使用MyBatis TypeHandler实现数据加密与解密的具体方案

使用MyBatis TypeHandler实现数据加密与解密的具体方案

《使用MyBatisTypeHandler实现数据加密与解密的具体方案》在我们日常的开发工作中,经常会遇到一些敏感数据需要存储,比如用户的手机号、身份证号、银行卡号等,为了保障数据安全,我们通常会对... 目录1. 核心概念：什么是 TypeHandler？2. 实战场景3. 代码实现步骤步骤 1：定义 E
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2