vue金额设置保留两位小数，保存后查看，金额不显示问题

1.金额设置保留两位小数，保存后查看，金额不显示，加上如下代码即可： 

watch: {
    value: function (newVal) {
      if (this.type == "money") {
        let thousandsFormate = this.numberFormat(
          newVal,
          this.precision,
          this.separator
        );
        this.displayValue = thousandsFormate;
      }
    },
  },

2.完整代码如下： 

<template>
  <div>
    <el-input
      v-show="type !== 'money' || isEdit"
      class="group-inp"
      :value="value"
      ref="validInput"
      @blur="handleNumBlur"
      @input="handleNumInput"
      @change="handleNumChange"
      v-bind="originProps"
    >
      <template slot="prepend">
        <slot name="prepend"></slot>
      </template>
      <template slot="append">
        <slot name="append"></slot>
      </template>
    </el-input>
    <el-input
      v-show="type == 'money' && !isEdit"
      class="group-inp"
      :value="displayValue"
      @focus="handleDisplayfocus"
      @clear="handleNumClear"
      v-bind="originProps"
    >
      <template slot="prepend">
        <slot name="prepend"></slot>
      </template>
      <template slot="append">
        <slot name="append"></slot>
      </template>
    </el-input>
  </div>
</template>
<script>
/**
 * <el-input>框自动校验,仅能填入数字，支持负数格式
 * 过滤规则: 仅能输入合法整数和小数格式 金额格式默认保留二位小数，普通数字格式可以自定义保留位数
 * 示例：<number-input :value.sync="value"/>
 * 注意:若增加新的prop，只需在props中注册
 */
export default {
  name: "NumberInput",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    //组件类型 默认是数字输入框 ,'money'是金额输入框
    type: {
      type: String,
      default: "",
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 最大保留小数位数
    fixMax: {
      type: Number,
      //   default: 6,
    },
    // 最小保留小数位数
    fixMin: {
      type: Number,
      //   default: 2,
    },
    // 负数支持
    sign: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "",
    },
    //保留小数位数
    precision: {
      type: Number,
      default: 2,
    },
    // 分隔符
    separator: {
      type: String,
      default: ",",
    },
    // 尺寸
    size: {
      type: String,
      default: "medium",
    },
    clearable: null,
    //自动补全
    autocomplete: {
      type: String,
      default: "off",
    },
    readonly: false,
  },
  data() {
    return {
      isEdit: false, // 默认显示格式化后内容
      displayValue: this.value, // 显示的值
    };
  },
  methods: {
    handleNumInput(value) {
      // 替换掉除数字和小数点的其余字符及多个小数点的输入，过滤规则：仅能输入任意数字和至多一个小数点
      let val = value + "";
      val = val.replace(/。/g, "."); // 消除中文下不能输入.的问题
      // 负数支持
      let sign = this.sign && /^-/.test(val) ? "-" : "";
      val = val.replace(/[^\d.]/g, "");
      val = val.split(".").length > 2 ? val.replace(/\.$/, "") : val;
      val = sign + val;
      this.$emit("input", val);
      this.$emit("update:value", val);
    },
    handleNumChange(value) {
      // 替换掉 '0.' '.123' '.' '0123' 不规则输入，过滤规则: 仅能输入合法整数和小数格式 如：1 ，1.2345
      let val = value + "";
      // 负数支持
      let sign = this.sign && /^-/.test(val) ? "-" : "";
      val = val.replace(/-/, "");
      val =
        !val.split(".")[0] || !val.split(".")[1] ? val.replace(/\./g, "") : val;
      if (val.split(".")[1]) {
        // 小数
        if (this.fixMin && val.split(".")[1].length < this.fixMin) {
          let f = 10 ** this.fixMin;
          val = (Math.floor(Number(val) * f) / f).toFixed(this.fixMin);
        } else if (this.fixMax && val.split(".")[1].length > this.fixMax) {
          let f = 10 ** this.fixMax;
          val = (Math.floor(Number(val) * f) / f).toFixed(this.fixMax);
        }
        val = sign + val;
      } else {
        // 整数
        val = val === "" ? "" : sign + Number(val).toFixed(this.fixMin);
      }
      this.$emit("change", val);
      this.$emit("update:value", val);
    },
    handleNumBlur(event) {
      if (this.type == "money") {
        let thousandsFormate = this.numberFormat(
          this.value,
          this.precision,
          this.separator
        );
        //   if (this.percentage) {
        //     thousandsFormate = this.currentValue * 100 + "%";
        //   }
        this.displayValue = thousandsFormate;
        let realValue = thousandsFormate.replace(/\,/g, "");
        this.$emit("change", realValue);
        this.$emit("update:value", realValue);

        this.isEdit = false;
      }
      this.$emit("blur", event);
    },
    handleNumClear(event) {
      this.displayValue = "";
      this.$emit("change", "");
      this.$emit("update:value", "");
    },
    // 开启编辑，金额输入框时使用
    handleDisplayfocus() {
      this.isEdit = true;
      setTimeout(() => {
        this.$refs.validInput.focus();
      }, 100);
    },
  },
  created() {},
  computed: {
    //原始el-input的prop值
    originProps() {
      const obj = JSON.parse(JSON.stringify(this.$props));
      return obj;
    },
  },
  //解决编辑模式不回显金额
  watch: {
    value: function (newVal) {
      if (this.type == "money") {
        let thousandsFormate = this.numberFormat(
          newVal,
          this.precision,
          this.separator
        );
        this.displayValue = thousandsFormate;
      }
    },
  },
};
</script>
<style scoped></style>

3.使用

<el-form-item label="原值" prop="assetValue" label-width="50px">
  <number-input
    :value.sync="queryParams.assetValue"
    placeholder="请输入原值'"
    style="width:100%;"
  >
    <template slot="append">元</template>
  </number-input>
</el-form-item>

ps：公司前辈解决的这个问题，记录一下