【问题记录】el-input-number组件数值null显示为0的解决方案

在Vue中使用Element UI的el-input-number组件时，如果希望当值为null时显示为0，可以使用计算属性或者监听器来处理。

以下是一个简单的例子，展示如何使用计算属性来实现这个需求：

<template>
  <el-input-number v-model="displayValue" :min="0" controls-position="right" />
</template>
 
<script>
export default {
  data() {
    return {
      value: null
    };
  },
  computed: {
    displayValue: {
      // 当读取displayValue时，转换null为0
      get() {
        return this.value || 0;
      },
      // 当更改displayValue时，更新value
      set(newValue) {
        this.value = newValue;
      }
    }
  }
};
</script>

在这个例子中，displayValue是一个计算属性，它总是返回value或0。当你尝试编辑el-input-number的值时，实际上编辑的是displayValue，然后通过set函数更新value。这样，无论value是否为null，显示在界面上的始终是一个有效的数值。