写个笔记记录下自己使用组件/插件的经历,个人经历,仅用作记录与参考,写法和解决方案各位还需鉴别,有更好的方法欢迎指导讨论。

v-decorator主要用来做antd-vue表单的表单验证,用法也很简单。

1.先在data里面定义一下验证规则

validatorRules: {
          orgCode: {
	            rules: [
	              { required: true, message: '请选择公司名称!'},
	            ]
          },
          time: {
	            rules: [
	              { required: true, message: '请选择订单日期!'},
	            ]
          },
          filePath: {
	            rules: [
	              { required: true, message: '请上传要导入的订单excel表格!'},
	            ]
          },
        },

2.直接在标签里面使用即可

在这里插入图片描述
当然这个规则也可以直接在标签里面去写,个人喜欢在data里面去写,便于维护吧。
这里只是用了必填项验证,v-decorator好像还有其他的验证规则,具体这里就不阐述了,大家自行查阅。

注意这里的组件是被a-form标签包裹的,既然是表单验证那肯定是要在表单里面啦

以上是基本用法,下面是我踩的坑

1.v-decorator的数据接管
从上面的代码图中可以看到我在a-tree标签里面用了v-model属性
在这里插入图片描述
实际上v-model和v-decorator不应该同时存在,因为使用了v-decorator之后,表单该项的数据会被form接管,对数据的修改应该要通过this.form.setFieldValue()来实现,当然用v-model也可以实现数据修改,但是在console.log里面会报红,虽然不影响使用,但总觉的怪怪的。

那为什么我还要这样使用呢,很简单,项目需求。
首先我们先看下a-tree标签的v-model属性是用来做什么的
通过查阅antd-vue官方开发文档可以看到:
在这里插入图片描述
这个属性存放的是当前树形控件被选中的节点的key,效果是这样的
在这里插入图片描述

大家去使用这个组件的时候就会发现官方文档只给出了有复选框样式的复选方案,单选方案没有复选框样式,而项目需求是在复选框存在的情况下的单选方案,这时候就需要去自己修改了,我也是比较简单粗暴,既然这个属性存放的是被选中的节点的KEY,那我在每次点击事件时去判断属性用来存放数据的数组就好了,如果是空的则把当前点击的复选框key推进去,如果不是空的就先把已有的数据推出,再把新的推进去,在点击本身的时候清除这个数组,这也是常规操作罢了,解释下为什么我要用v-model去修改表单数据。
项目需求就是父节点可选但不可提交,只可单选子节点并提交
在这里插入图片描述
在这里插入图片描述

这样使用完你就会发现在控制台输出这么一串:

Warning: `getFieldDecorator` will override `value`, so please don't set `value and v-model` directly and use `setFieldsValue` to set it.

在这里插入图片描述
直接就告诉你了不要用v-model,虽然不影响使用,看需求吧。

2.使用v-model处理表单数据还会出现一个表单必填项都填了,但是点提交的时候还是提示必填项未填的情况
这时记得在赋值的时候也给表单项赋值就可以this.form.setFieldsValue({ currentCompany : this.currentCompany })

3.v-decorator用在j-dict-select-tag上会使得placeholder不生效,显示空白
j-dict-select-tag是jeecg-boot里的一个自定义组件,其实就是个下拉框,之所以用自定义的而不用antd的是为了做数据字典绑定这不是本篇要说的内容了,这个坑其实是jdict自定义组件的坑后面还会再提,下拉框一般都要有个placeholder,符合审美也便于提示用户下拉框的作用,就像:
在这里插入图片描述
如果是空白的话↓
在这里插入图片描述
看起来就不那么舒服了。
所以这个问题要解决掉。
首先我们先知道为什么会是空白,去看这个自定义组件封装的代码后我发现这个下拉框组件的值为’’ 或者 null的时候是空白的:
在这里插入图片描述
而通过控制台输出我发现v-decorator之后会给下拉框一个默认值 ‘’,那么这时j-dict-select-tag就不会return东西出来了,下拉框就显示空白,所以解决方案就是给v-decorator设置一个默认值,准确的说是给下拉框一个默认值,不为空也不为null即可,可以设置为undefined

关于v-decorator的坑就先写这么多吧,各位参阅的时候注意时效性和正确性,欢迎指教。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐