vben admin 表单项禁用 form 全局配置单独配置labelCol/wrapperCol

已于 2022-04-14 16:45:28 修改
阅读量1.6k 收藏 3
点赞数 2
分类专栏： 一些百度不到自己解决的问题 文章标签： 前端 typescript 前端框架
于 2022-04-14 16:11:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44367273/article/details/124174165
版权

有时候表单中特殊项需要单独配置宽度，比如多行文本备注独占一行，此时若想忽略全局配置的labelCol/wrapperCol，可以参考下面写法：

  {
    field: '',
    component: '',
    label: '',
    disabledLabelWidth: true,
    itemProps: {
      labelCol: { span: 7 },
      wrapperCol: { span: 15 },
    },
  },
有没有不存在的昵称啊
关注
专栏目录
Vben Admin—— vben-admin BasicTable 表格多选时，动态显示/隐藏选择框
qq_43201350的博客
09-30 265
Vben Admin—— vben-admin BasicTable 表格多选时，动态显示/隐藏选择框
antd From Item labelCol和wrapperCol样式细节调整
zhangyubababa的博客
04-19 4219
1： const formLayoutActivityLog={ labelCol: { span: 7 }, wrapperCol: { span: 17 }, labelAlign: 'right' } 2 <Col span={6}> 这句代码 确定每一个 Item的 宽度 弹性的 6 <Form.Item .
关于vben+admin的表单联动编辑回显问题
weixin_44864019的博客
05-27 3517
这周有做一个需求，在测试环境跑的时候发现一个表单的回显问题。 需求背景：一个页面上有列表，通过列表的操作栏里的编辑来打开一个抽屉，抽屉里面是一个form表单。父选择框的options是由接口获得的，通过父选择框的onChange事件，将返回数据的children赋值给子组件的options，来渲染子选择框的options。在新增的时候流程很正常，编辑的时候也是正常的，但是！！！在我刷新页面第一次去编辑回显的时候会出现我将详情数据set给表单之后，子选择框的回显直接是value值，并不是我希望的labe
改变下拉框状态控制另一个控件的显示或者隐藏
zhoujie的博客
08-14 2447
&lt;script type="text/javascript"&gt;     function gradeChange(){         var vs = $('#select option:selected').val();         if(vs==0){             $("#ll").hide();         }else{             $("#ll...
vben admin如何让组件显示为不可选中状态(disabled使用)
shangjinx的博客
08-01 472
【代码】vben admin如何让组件显示为不可选中状态(disabled使用)
使下拉框某项不可选的方法
闷骚的男
07-07 5437
2008年02月22日 02:24 P.M.            option.disabled { color: #999;}             function preventSelectDisabled(oSelect)     {    var isOptionDisabled = oSelect.options[oSelect.selected
禁用下拉框
万物皆代码
08-06 7419
列表页面中点击查看按钮时，不想让用户可以选择其他的选项。虽然可以直接去掉提交按钮，来实现让用户只能查看不能修改的功能，但是用户还是可以自由的查看下拉框里的内容。 我们要实现的是只能查看，就是将所有选择框禁用： $(function() { //查看弹出页面，禁止内容修改 $('#popup input').attr("disabled",true); $('#popup textare...
Vue-ant-design-vue 表单项输入时卡顿问题
baixue0111的博客
07-06 8354
问题：vue项目中使用了ant-design-vue的Form表单，并且自定义校验方法，之后发现我在输入框进行输入内容时，出现卡顿的问题，响应特变慢，后来找了一下官方文档发现表单有一个【selfUpdate】的参数，意思是：自定义字段更新逻辑。果不其然，当我们在输入框输入内容时，vue进行多次的render刷新渲染操作，导致form-item的input在输入时出现卡顿问题。 官方参数说明：（https://www.antdv.com/components/form-cn/#selfUpdate）
form表单中控件较多,加载完成后切换页面都很慢的解决方法
weixin_34380948的博客
09-23 1230
form表单中控件较多,加载完成后点击都很慢,为什么?我一页面中form表单里面上百个控件（如input、select、radio、checkbox等），还有一些js脚本，加载速度还可以，都能全部显示完毕，但是点击一些事件（如切换tab、关闭模拟框，点击radio等）都非常慢，不知道为什么？ 当我采用inprivate模式浏览时，以上动作都很快，但老用inprivate也麻烦，有何办法解决。按理说...
vben admin白名单配置
03-20
### Vben Admin 白名单配置详解 #### 一、背景介绍 在开发过程中，当我们采用Vben Admin框架进行项目构建时，可能会遇到一种情况：当其他系统试图通过iframe的方式集成我们的项目时，发现项目的路由URL会自动重定向...
vue-vben-admin-main源码
12-19
6. **Vue-vben-admin特性**：Vue-vben-admin提供了诸如权限控制、多语言支持、动态路由、表格、表单等常见管理后台功能的实现，这些都是通过Vue.js的特性如组件、计算属性、监听器等实现的。 7. **Vue组件**：在`...
vue-vben-admin.md
07-30
vue-vben-admin.md
Vue-Vben-Admin - 自定义上传excel文件弹框组件
09-27
Vue-Vben-Admin 是一个基于 Vue.js 的现代化管理后台模板，它提供了丰富的组件和功能，以帮助开发者快速构建企业级的后台系统。在本案例中，我们关注的是一个自定义的上传Excel文件的弹框组件。这个组件允许用户选择...
vben admin form 表单 常见问题
lyinshaofeng的博客
12-07 2214
vben admin form 表单 常见问题
vben表单动态校验
weixin_54858833的博客
03-30 3115
记录下，下次直接用。 需求 证件类型选择身份证时，校验身份证号码，限制为18位 代码 FormSchema 配置 { field: 'certificate_type', label: '证件类型', component: 'Select', componentProps: { placeholder: '请选择证件类型', options: DictData.getDictById('IdCardType'),
Vben Admin 自学记录 —— Drawer组件的基本使用及练习（持续更新中...）
qq_36842789的博客
05-07 2345
对 antv 的 drawer 组件进行封装，扩展拖拽，全屏，自适应高度等功能。
vben-Admin 框架--表单问题汇总
热门推荐
xiaofiy的博客
07-07 1万+
vebn-admin
Vben-Admin 框架，TypeScript、vue3的BasicFrom数据自动计算回写
weixin_61575780的博客
11-24 1421
Vben-Admin 框架，TypeScript、vue3的BasicFrom
vben admin component: ‘Input‘ 只能输入数字设置
qq_24953751的博客
09-04 438
【代码】vben admin component: ‘Input‘ 只能输入数字设置。
vben admin 限制表单项Input只能输入数字
最新发布
09-30
vben admin 是基于Vue.js的权限管理系统，它可以帮助开发者快速搭建后台管理界面。如果你想在其中限制某个表单字段（Input）只允许用户输入数字，你可以通过HTML属性、自定义验证规则或者是使用一些前端库来实现。 1. HTML 属性：可以直接在input元素上设置`type="number"`，这样浏览器会自动阻止用户输入非数字字符： ```html <input type="number" name="yourField" v-model.number="yourValue"> ``` 2. Vue.js 验证：在vben admin 的表单组件中，你可以利用Vue的内置验证机制，比如在data中定义rules，然后在methods里监听input值的变化，检查是否为数字： ```javascript data() { return { yourValue: '', rules: { yourField: { validator: v => v === '' || /^\d+$/.test(v), message: '请输入数字' } }, }; }, methods: { handleValidation(field) { this.validateField(field); }, } ``` 当用户输入不符合规则时，会触发`handleValidation`方法显示相应的错误提示。 3. 前端库：如果你需要更复杂的功能，如正则表达式校验，可以考虑引入第三方库如vue-validator或element-ui自带的验证功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值