element input输入框千分位无法回显问题解决方法

在后台管理的项目中，输入部分数量是需要千分位分割，但是遇到了父组件调用子组件无法回显的问题，父子组件不能双向绑定的问题，在使用计算属性之后解决，方法如下：

• 父组件

 <el-form-item label="最小库存StockMinSS："
               prop="minSS">
		  <Custom-Input ref="ipt"
		   				:value.sync="editForm.minSS"
		                :switchDayToWeek='switchDayToWeek' />
</el-form-item>

• 子组件

<template>
  <el-input v-model="defaultValue"
            @input="changeInput"
            v-bind="options">
    <template slot="append">{{ switchDayToWeek }}</template>
  </el-input>
</template>
<script>
export default {
  name: 'CustomInput',
  props: {
    value: String,
    options: Object,
    switchDayToWeek: String
  },
  data() {
    return {
      // defaultValue: '0'
    }
  },
  mounted() {
    // this.defaultValue = this.value ? this.transferToDecimal(this.value) : '0'
  },
  computed: {
  // 计算属性赋值
    defaultValue: {
      get: function () {
        return this.transferToDecimal(this.value)
      },
      // setter
      set: function (newValue) {
        console.log('newValue===', newValue)
      }
    }
  },
  methods: {
    transferToDecimal(num) {
      if (!num) return
      let [sInt, sFloat] = num.split('.')
      // 注意 “$&,”的应用
      sInt = sInt.replace(/\d(?=(\d{3})+$)/g, '$&,')
      // 区分整数与浮点小数
      return sFloat ? `${sInt}.${sFloat}` : `${sInt}`
    },
    changeInput(value) {
      // 此处允许用户输入点 “.”, 同时如果再次输入点将会被截掉
      if (value.charAt(value.length - 1) == '.') {
        if (value.charAt(value.length - 2) == '.') {
          this.defaultValue = value.substr(0, value.length - 1)
        }
        return
      }
      // 此处防止用户输入特殊字符，具体查看下面正则
      value = this.cleanInput(value)
      this.defaultValue = this.transferToDecimal(value)

      // 此处激活.sync默认行为实现props的双向绑定， 注意'update'
      this.$emit('update:value', value)
    },
    cleanInput(value) {
      // 正则表达式只匹配 首位负数， 数字， 以及第一个“.”号（如有多个只匹配一个），提取为数值默认顺序连接，然后通过转换函数转换为千分位
      return value.match(/(^-\d+|\d+|\.{1})/g, '').join('')
    }
  }
}
</script>