网站建设吗简洁大气企业网站源码 后台

---

一、背景

• View design + vue2的项目，点击编辑按钮，出现弹窗，为了重复使用，写了一个传入配置构建编辑弹窗的组件。组件中有inputNumber组件，出现以下问题：
• 理想场景：点击编辑打开弹窗后直接点击确定，直接请求编辑接口，然后关闭弹窗。
• 实际场景：点击编辑打开弹窗后，数字输入框显示数字1，然后表单校验不通过。

二、操作步骤

1.复现前的准备工作

（1）vue版本和view design 版本

{"vue": "^2.6.11","view-design": "^4.7.0",
}

（2）创建一个组件（组件中根据类型渲染不同的组件）

<Formref="advertisingRef":model="advertiserDataForm"name="basic"class="formclass"autocomplete="off":label-width="130"><FormItemv-for="item in advertisingConfig":key="item.label":label="item.label":prop="item.name":rules="item?.rules?.required || item?.rules?.[0]?.required ? item?.rules : null":class="{'itemBorder': item.isBorder, 'itemMargin': item.isMargin, 'itemMarginBottom': item.isMarginBottom }"><template v-else-if="item.type === 'inputNumber'"><InputNumberv-model="advertiserDataForm[item.name]":disabled="item.disabled":style="{width: item.width}":min="item.min"/><spanv-if="item.isIcon"class="ml5">%</span></template></FormItem></Form>

（3）在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/空字符串

<template><InputNumber :max="100" :min="0" v-model="value1"></InputNumber>
</template>
<script>export default {data () {return {value1: undefined}}}
</script>

总结

• 设置view design inputNumber组件设置默认值不能设置undefined，可以设置为null/空字符串
• 写代码需要注意取的值可能为空，使用‘点语法’获取的尽量使用?来校验可能为空的情况进行处理