ant-design-pro的可编辑表格editprotable的遇到的一些小问题

news2024/11/24 12:55:19

需求:1、使用可编辑表格实现对某一行表格的数据进行编辑,对输入内容控制必须低于同行某一数据
2、解决搜索数据和列名展示不同,和不可编辑的列不展示在搜索框
实现效果
在这里插入图片描述

解决搜索和readonly之间的问题

因为本次需求只要求修改一个数据,其他都需要使用readonly:true

但是我用的时候出现了一个问题,如果使用了readonly:true,那么这个参数显示在搜索参数中就会变成一条横线,无法搜索,所以对于一些参数,比如我的需求是,虽然不可编辑,但是需要有搜索功能。所以我是写了两个关于这个参数的设置。

例如我的姓名,它需要显示在搜索框,但是又不能编辑,但是加了readonly搜索框就会变成——一个横线,所以这时候就需要写两个,加了readonly的则加上hideInSearch: true,再写一个关于姓名的,不加readonly,但是加上 hideInTable:true
以下供参考

const displayCol2: ProColumns<MaterialDisplay>[] = [
    {
        dataIndex: 'index',
        valueType: 'indexBorder',
        width: 48,
        readonly: true,

    },
    {
        title: '姓名',
        dataIndex: 'staffName',
        hideInTable:true,
    },
    {
        title: '姓名',
        dataIndex: 'staffName',
        readonly: true,
        hideInSearch: true,
    },

//时间的筛选转换参考
    {
        title: '创建时间',
        dataIndex: 'accpetDate',
        valueType: 'dateRange',
        hideInTable: true,
        search: {
            transform: (value) => {
                return {
                    startTime: value[0],
                    endTime: value[1],
                };
            },
        },
    }
  ];

2、使用validator解决输入数据校验为必须比同行数据小

网上搜了好多关于validator的使用,但是一直没找到怎么获取同行数据做校验。
在配置列中,使用 formItemProps
使用箭头函数获取编辑行的数据

{
        title: '回单数量',
        dataIndex: 'num',
        hideInSearch: true,
        formItemProps: (_, record) => {
            return {
                rules: [
                    {
                      required: true,
                      message: '请输入数量',
                    },
                    // 校验输入数量
                    {
                        message: '请输入正确的数量', 
                        validator: async (_, value: number,) => {
                            console.log(_, value);
                            if(value > record.entity.oldNum || value<0) {
                              return Promise.reject("输入数量小于物料库存")
                            }
                        }
                    }
                    
                  ],
            }
        },
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1048919.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ElementPlus· tab切换/标签切换 + 分页

tab切换 ---> <el-tabs><el-tab-pane>... 分页 --------> <el-pagination> tab切换 // tab标签切换 // v-model双向绑定选项中的name&#xff0c;tab-change事件在 activeName改变时触发 <script setup> const tabChange (tab, event)>{…

【JAVA】飞机大战

代码和图片放在这个地址了&#xff1a; https://gitee.com/r77683962/fighting/tree/master 最新的代码运行&#xff0c;可以有两架飞机&#xff0c;分别通过WASD&#xff08;方向&#xff09;&#xff0c;F&#xff08;发子弹&#xff09;&#xff1b;上下左右&#xff08;控…

大型企业网如何部署NAT实现需求

1.企业中堕胎电脑如何共享上网&#xff1f; 2.NAT地址转换原理讲解&#xff1b; 3.企业机房如何用NAT让服务器更安全&#xff1f; - NAT - 网络地址转换 - 什么式网络地址 IP地址 -通信时候的设备标识 - 为什么要把IP地址做转换呢&#xff1f; -- 公网IP&#xff…

迷你无人车 Navigation 导航(5)— 基础框架学习

迷你无人车 Navigation 导航&#xff08;5&#xff09;— 基础框架学习 整个功能包整个功能包集合以move_base为核心&#xff0c;将里程计信息、传感器信息、定位信息、地图以及目标点输入给move_base&#xff0c;move_base经过规划后会输出速度指令 move_base包括三个关键部分…

如何像人类一样写HTML之第一个HTML、标签的关系与注释

文章目录 前言一、创建第一个HTML文档创建方式1创建方式2 二、标签的关系三、注释的使用总结 前言 在现代数字化社会中&#xff0c;网页是我们获取信息、与他人交流以及展示自己的重要工具之一。要了解如何创建网页&#xff0c;HTML&#xff08;Hypertext Markup Language&…

给网站引入各大搜索引擎的关键字提示,白给的接口薅他羊毛

属于是导航网站必要的了 因为网站是个导航网站&#xff0c;有一个搜索框&#xff0c;用户搜索时需要像百度一样有个搜索提示关键词列表。 之前只是用百度&#xff0c;现在给增加了好几个&#xff0c;想换那个就换那个了&#xff0c;直接上图片 可以配置属于是想选哪个选哪个&…

树莓派4B使用Docker部署SpringBoot项目——(二)使用docker安装mysql

树莓派4B使用docker安装mysql 使用的树莓派4B为8GB版本&#xff0c;使用docker pull命令拉取MySQL镜像&#xff1a; docker pull --platformarm64 mysql/mysql-server等待拉取完成 使用docker images查看镜像 创建MySQL容器 docker run -di --namemysql -p 3306:3306 -e MY…

(vue3)create-vue 组合式API

优势&#xff1a; 更易维护&#xff1a;组合式api&#xff0c;更好的TS支持 之前是选项式api&#xff0c;现在是组合式&#xff0c;把同功能的api集合式管理 复用功能封装成一整个函数 更快的速度 更小的体积 更优的数据响应式&#xff1a;Proxy create-vue 新的脚手架工…

批量剪辑视频的秘密武器,添加SRT字幕并提升你的视频品质,高效剪辑的艺术

在如今的数字时代&#xff0c;视频内容的制作和分享变得越来越普遍。如果你是一个视频创作者&#xff0c;或者经常需要编辑和分享视频内容&#xff0c;那么我们为你带来了一款视频批量剪辑工具&#xff0c;让你轻松在固定位置添加字幕&#xff0c;打造专业级剪辑效果&#xff0…

五金零售批发商城小程序的作用是什么

五金产品在人们生活中不可或缺&#xff0c;无论需求高低&#xff0c;总归会购买&#xff0c;而每个城市的五金店也非常多&#xff0c;市场高应用度也促进了各个品牌商们增长&#xff0c;而在实际销售中&#xff0c;无论厂家还是门店商家都会面临一些痛点&#xff0c;如品牌宣传…

Spine Web Player教程

官方文档教程&#xff1a; Spine Web Player 报错&#xff1a; 1、Q:报Animation bounds are invalid XX错误&#xff1f; A:请校对cdn或者npm install的版本号是否与json资源内版本号一致。

SQL做流水号

SELECT REPLICATE(0, 3 - LEN(3)) 3 AS 流水号 SELECT REPLICATE(0, 5 - LEN(3)) 3 AS 流水号 SELECT REPLICATE(0, 8 - LEN(3)) 3 AS 流水号

公司新产品上线如何打出知名度?

任何一个新产品上线时都需要进行推广打出知名度&#xff0c;软文作为一种成本低效果留存时间长的营销方式能够让公司的新产品打出知名度&#xff0c;向潜在用户展示新产品的独特优势以及特性&#xff0c;下面就让媒介盒子告诉大家&#xff0c;新产品上线时&#xff0c;公司应该…

AIGC快速入门体验之虚拟对象

AIGC快速入门体验之虚拟对象 一、什么是AIGC二、AIGC应用场景2.1 代码生成2.2 图片生成2.3 对象生成 三、AIGC虚拟对象3.1 AIGC完全免费工具3.2 快速获取对象3.3 给对象取名3.4 为对象写首诗3.5 和对象聊聊天 一、什么是AIGC AIGC是生成式人工智能&#xff08;Artificial Intel…

每日一题——寻找右区间(排序 + 二分查找)

寻找右区间&#xff08;排序 二分查找&#xff09; 题目链接 理解题目 题目给定一个具有n行2列的二维数组intervals&#xff0c;对于intervals的每一行元素i&#xff0c;就表示一个区间数组&#xff0c;intervals[i][0]即这个区间数组的起始位置start&#xff0c;intervals[i…

JTS:09Touches 接触

这里写目录标题 版本JTS Touches边接触角点接触内部接触线段交叉顶点接触 版本 org.locationtech.jts:jts-core:1.19.0 链接: github JTS Touches 边接触 public void test00() {Coordinate[] coordinates1 new Coordinate[] {new Coordinate(1, 1), new Coordinate(1, 4),…

Gronwall‘s inequality

本文的主要了解下Gronwall不等式的两种形式&#xff0c;此不等式常常用来证明函数有界。 See 知乎&#xff1a; https://zhuanlan.zhihu.com/p/339358108

Vue底层术语解析以及存在关系

Vue底层术语解析以及存在关系 虚拟 DOM渲染函数Vue2Vue3 diff 算法抽象语法树&#xff08;Abstract Syntax Tree&#xff0c;AST&#xff09;关系 虚拟 DOM 可能都听说过虚拟dom &#xff0c;虚拟dom到底是Vue的啥&#xff0c;再此针对性讲解&#xff08;针对Vue官网简单化理解…

新手十分钟也能完成的Unity小游戏打砖块

由Siki学院打砖块游戏启发完成一个非常非常简单&#xff0c;纯新手也能十分钟做出来的小游戏——打砖块。 一.搭建场景 首先我们先在一个空白的3D项目中创建一个Plane平面&#xff0c;将其放置于世界中央位置&#xff0c;长宽设置为2&#xff0c;并为其添加一个材质Material&am…

掌握Go的运行时:从编译到执行

目录 一、Go运行编译简介Go语言的目标和设计哲学运行时环境编译过程小结 二、执行环境操作系统与硬件层系统调用&#xff08;Syscalls&#xff09;虚拟内存 Go运行时&#xff08;Runtime&#xff09;Goroutine调度器内存管理和垃圾收集网络I/O代码示例&#xff1a;Go运行时调度…