vue2 + View design 使用inputNumber设置默认值为undefined但展示数据为1且表单校验不通过的原因

文章目录

一、背景
二、操作步骤
- 1.复现前的准备工作
- - [（1）vue版本和view design 版本](#（1）vue版本和view design 版本)
  - （2）创建一个组件（组件中根据类型渲染不同的组件）
  - （3）在list.vue页面中引入组件，传入配置，使用组件
- 2.出现的问题
- 3.解决问题
总结

一、背景

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

二、操作步骤

1.复现前的准备工作

（1）vue版本和view design 版本

javascript 复制代码

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

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

html 复制代码

<Form
        ref="advertisingRef"
        :model="advertiserDataForm"
        name="basic"
        class="formclass"
        autocomplete="off"
        :label-width="130"
      >
        <FormItem
          v-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'">
            <InputNumber
              v-model="advertiserDataForm[item.name]"
              :disabled="item.disabled"
              :style="{width: item.width}"
              :min="item.min"
            />
            <span
              v-if="item.isIcon"
              class="ml5"
            >%</span>
          </template>
        </FormItem>
      </Form>

（3）在list.vue页面中引入组件，传入配置，使用组件

javascript 复制代码

[
........
 {
  name: 'returnPoint',
  label: '单价',
  value: 0, // 绑定数据
  type: 'inputNumber', // 数据类型
  min: 0, // 最小值
  isIcon: true, // 是否显示%icon
  width: '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/空字符串

javascript 复制代码

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

总结

设置view design inputNumber组件设置默认值不能设置undefined，可以设置为null/空字符串

写代码需要注意取的值可能为空，使用'点语法'获取的尽量使用?来校验可能为空的情况进行处理