网站架设 数据库选用,seo优化sem推广,东莞企业推广网络营销,广州市第一建筑工程有限公司文章目录 一、背景二、操作步骤1.复现前的准备工作#xff08;1#xff09;vue版本和view design 版本#xff08;2#xff09;创建一个组件#xff08;组件中根据类型渲染不同的组件#xff09;#xff08;3#xff09;在list.vue页面中引入组件#xff0c;传入配置1vue版本和view design 版本2创建一个组件组件中根据类型渲染不同的组件3在list.vue页面中引入组件传入配置使用组件 2.出现的问题3.解决问题 总结 一、背景
View design vue2的项目点击编辑按钮出现弹窗为了重复使用写了一个传入配置构建编辑弹窗的组件。组件中有inputNumber组件出现以下问题理想场景点击编辑打开弹窗后直接点击确定直接请求编辑接口然后关闭弹窗。实际场景点击编辑打开弹窗后数字输入框显示数字1然后表单校验不通过。
二、操作步骤
1.复现前的准备工作
1vue版本和view design 版本
{vue: ^2.6.11,view-design: ^4.7.0,
}2创建一个组件组件中根据类型渲染不同的组件
FormrefadvertisingRef:modeladvertiserDataFormnamebasicclassformclassautocompleteoff:label-width130FormItemv-foritem in advertisingConfig:keyitem.label:labelitem.label:propitem.name:rulesitem?.rules?.required || item?.rules?.[0]?.required ? item?.rules : null:class{itemBorder: item.isBorder, itemMargin: item.isMargin, itemMarginBottom: item.isMarginBottom }template v-else-ifitem.type inputNumberInputNumberv-modeladvertiserDataForm[item.name]:disableditem.disabled:style{width: item.width}:minitem.min/spanv-ifitem.isIconclassml5%/span/template/FormItem/Form3在list.vue页面中引入组件传入配置使用组件
[
........{name: returnPoint,label: 单价,value: 0, // 绑定数据type: inputNumber, // 数据类型min: 0, // 最小值isIcon: true, // 是否显示%iconwidth: 120px,disabled: false, // 是否禁用rules: { required: true, type: number, message: 单价不能为空, trigger: submit }}
]2.出现的问题 【总金额】和【单价】都是使用的inputNumber 问题1: 打开弹窗切换【渠道资源】出现【总金额】默认展示为1 问题2: 表单校验不通过奇怪的是输入值后就会会通过表单校验 [图片] 3.解决问题
1在组件中打印绑定的数据和绑定数据的数据类型由于view design 的表单校验需要校验数据类型 获取线索打印后发现绑定数据为空数据类型为undefined 2我设置的默认值明明为0怎么可能是undefined呢 原因是由于【总金额】是对象totalAmountParams的unitPrice切换的时候获取不到值导致 解决赋值的时候加上即可。 注意点判断不要直接写成this.advertiserForm.unitPrice row.totalAmountParams?.unitPrice ? row.totalAmountParams?.unitPrice : null而是需要 row.totalAmountParams?.unitPrice 0 不然值为0回显数据为空 this.advertiserForm.unitPrice row.totalAmountParams?.unitPrice 0 ? row.totalAmountParams?.unitPrice : null 3为什么数据变成1呢 拷贝组件中的示例demo如下设置默认值为undefined最小值为0最大值为100在demo示例中不难发现默认值为undefined ,值会默认变成string类型的1。属于是view design 本身的bug 解决 将只默认设置为null/空字符串
templateInputNumber :max100 :min0 v-modelvalue1/InputNumber
/template
scriptexport default {data () {return {value1: undefined}}}
/script总结 设置view design inputNumber组件设置默认值不能设置undefined可以设置为null/空字符串写代码需要注意取的值可能为空使用‘点语法’获取的尽量使用?来校验可能为空的情况进行处理
