html表单不允许修改,[问题]如何在表单里定义(form)仅仅可读,不可修改的列?

经过我不懈努力的寻找及测试,现在有一个解决方案可以解决type='form'表单里设置只读字段。只需要覆写columns中的renderFormItem字段即可。下面以设置用户名只读为例:

pro-table版本:"@ant-design/pro-table": "^2.9.16"

columns配置

import { useRef, useState } from 'react';

...

const [updateFormValues, setUpdateFormValues] = useState({});

const columns = [

{

title: '用户名',

dataIndex: 'username',

// 重点在下面代码

renderFormItem: (_, { type, defaultRender, ...rest }, form) => {

if (type === 'form') {

// 返回新的组件

return {updateFormValues.username}

}

return defaultRender(_);

}

},

]

ProTable配置

type="form"

form={{

initialValues: updateFormValues,

}}

rowKey="id"

columns={columns}

rowSelection={{}}

/>

效果图:

0c14dea0f2348fce0aa33966f0869c5d.png

参考资料:

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

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

相关文章

html如何查看文档,查看文档

设计步骤(返回正文)一、绘制表格1、在手动设计Html模板之前,我们先需要一个模板的样式,这个样式我们可以拿原来的纸质的样式,也可以在Excel表格中画一个样式,如图1所示,我们后面的设计都要根据这个表格来进行设计。图1…

父亲的忠告:把孩子培养成普通人

现在你用不到,将来你肯定用的到。你一定会做个好爸爸。 转自:http://luo.bo/25512/转载于:https://www.cnblogs.com/webcc/archive/2012/06/01/2531207.html

U盘装XP系统(含截图,2012最新原创超简单方法)

U盘装XP系统(含截图,2012最新原创超简单方法)首先准备好3样必备东西 1.U盘2.XP系统(推荐GhostXP SP3 2012统一论坛最新版;迅雷快传下载地址:http://kuai.xunlei.com/d/BMLHLZHXVGKT)3.制作U盘WINPE软件(推荐UltraISO&a…

推到重做

自己做到太差了,完全是在1.16的基础上进行了少量的修改,和自己当初的想法完全不一样,推到重新做!!! 先找下思路,复习下自己的系统以及uboot烧写过程。 自带Uboot烧写过程 硬件检测结果&#xff…

广东省2021年普通高考成绩复查结果查询,广东省2021年普通高考英语听说考试成绩可以查询啦!...

广东省2021年普通高考英语听说考试评卷工作已经结束。现将考试成绩发布的有关事项通知如下。一、考试成绩发布广东省2021年普通高考英语听说考试成绩将于4月28日统一发布。高考英语听说考试成绩按考生卷面成绩(满分60分)3,四舍五入取整数后计得。英语听说考试成绩与…

2021辽宁大洼高中高考成绩查询,2021大洼高中最后一跑——励志高考,逆袭人生...

六月的天,湛蓝六月的风,不燥六月的日子,激情四溢六月里的故事,总是以青春为主题六月里的大洼高中高三学子们迎来了人生重要的里程碑——高考2021年6月5日,是大洼高中高三学子们热情饱满准备出征高考、逆袭人生的日子。…

background 旋转_基于HTML5 Canvas实现工控2D叶轮旋转

之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元——叶轮旋转。我们先来看下这个叶轮模型长什么样从模型上看,这个叶轮模型有三个叶片,每一个叶片都是不规则图形,显然无法用上我们HT for Web的基础图形…

h5活动是什么意思_深度|场景赋能H5,365天让保险线上拓客更广更容易

上周局长和大家分析了保险头部公司母亲节的一些“新玩法“(戳这里可回看),不难看出,在当下这种特殊的环境中,保险公司都在打通线上线下双运营模式,都在寻求更多不一样的拓客机遇。在普华永道的最新研究报告…

前端学习(477):前端简介1

由于一些特殊原因得影响 自己得学习进行了一个中断 从今天开始 开始恢复了

做玫瑰花的方法 用纸_新生活新健康:春饮玫瑰花茶 最是疏肝解郁

在众多“玫瑰食养”的方法中,玫瑰花茶是较为经典的一种。经常喝玫瑰花茶的人都知道,玫瑰花茶中含有丰富的维生素、矿物质、多糖、氨基酸及花青素,坚持饮用可达到美白、抗衰老的作用,由于性价比较高,被称为“省钱的美白…

学校云计算机室,云计算实训室简介

云计算技术作为IT行业未来发展趋势,同时作为国家重点发展产业,正处在高速发展时期,人才需求已凸显。然而,目前云计算人才培养体系还处在初级阶段,相关专业人才缺口巨大。因此,学院在2015年投入100余万元建设…

c# 标准正太分布函数_数据标准化处理中的min-max和zscore

数据标准化就是把有量纲的数据变成无量纲的数据,把量级不同的数据处理到一个层级,从而让不同的数据之间具有可比性。比如收入和体重两个解释变量,收入的单位是元,体重的单位是kg,10000元的收入要和45kg放到一个回归模型…

高一计算机网络技术应用计划,高一计算机网络应用基础教学计划

高一计算机网络应用基础教学计划 成都市工程职业技术学校 学期授课计划 授课学期 2015年上学期 课程名称 计算机网络应用基础 适用班级 2014级计算机 1 班 任课教师: 袁冬梅 2015 年 3 月 9 日制订 教研组长: 刘清太 2015 年 月 日审查 专业部主任&#…

带电插拔损坏设备原理_Win10拔U盘不用再点“安全弹出”了,XP和Win7老用户都眼馋了...

用过U盘的人都知道,当我们拔出U盘时,需要手动点击“删除USB硬件”以保证U盘结束运行,如强行拔出,轻则损坏数据,重则U盘报废,但其实很多人都不记得就直接拔了。不过最近微软传出好消息,5月将更新…

使用 Jackson 树连接线形状

将“树连接线”形状上的端点 粘附到“进程”或“过程”形状上的连接点 上。将“树连接线”形状上分支末端的控制手柄 拖到其他形状上的连接点 处。拖动“树连接线”形状中心的控制手柄 ,可最多再添加四个分支。要向连接线添加文字,先选择该形状&…