【InputNumber】 计数器默认值改为空

<el-input-number v-model="num"  :min="1" :max="10" label="描述文字"></el-input-number>

当num设置为 null 或者 ""  都不能将输入框的值变为空，而是0

但是当有时候，我们的需求，需要它为空

<template>
  <div class="content-el-array">
    <el-input-number size="medium" v-model="data1.num1"></el-input-number>
    <el-input-number size="medium" v-model="data1.num2"></el-input-number>
    <el-input-number size="small" v-model="data1.num3"></el-input-number>
    <el-input-number size="mini" v-model="data1.num4"></el-input-number>

    <div>加了其他属性也是一样 :min="1" :max="10"   </div>
    <el-input-number size="medium" :min="1" :max="10" v-model="data1.num1"></el-input-number>
    <el-input-number size="medium" :min="1" :max="10" v-model="data1.num2"></el-input-number>
    <el-input-number size="small" :min="1" :max="10" v-model="data1.num3"></el-input-number>
    <el-input-number size="mini" :min="1" :max="10" v-model="data1.num4"></el-input-number>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data1: {
        num1: 11,
        num2: 22,
        num3: 33,
        num4: 44,
      },
    };
  },
  methods: {},
  mounted() {
    //我们就看到第二个给了默认值''
    this.data1.num1 = null;
    this.data1.num2 = undefined;
    this.data1.num3 = "";
    this.data1.num4 = "字符串";
  },
};
</script>
<style scoped lang="scss">
.content-el-array {
  border: 1px solid red;
  margin: 20px;
  display: flex;
  flex-direction: column;
}
</style>

核心代码

 

效果图

 

我们也可以通过一开始定义时候给默认值为undefined

data(){
	return {
		ruleForm: {
			num: undefined
		}
	}
}