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

需求:1、使用可编辑表格实现对某一行表格的数据进行编辑,对输入内容控制必须低于同行某一数据
2、解决搜索数据和列名展示不同,和不可编辑的列不展示在搜索框
实现效果
ant-design-pro的可编辑表格editprotable的遇到的一些小问题_第1张图片

解决搜索和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("输入数量小于物料库存")
                            }
                        }
                    }
                    
                  ],
            }
        },
    },

你可能感兴趣的:(项目,react,前端,ant-design-pro)