Vue2版本的ElementUI的input组件加千分符

在Vue2中使用ElementUI的Input组件加千分符，可以通过watch来监听输入值的变化，并使用正则表达式来添加或移除千分位。

以下是一个简单的示例：

<template>
  <el-input v-model="inputValue" @input="formatInput"></el-input>
</template>
 
<script>
export default {
  data() {
    return {
      rawValue: '',
      formattedValue: ''
    };
  },
  watch: {
    rawValue(newValue) {
      this.formattedValue = this.formatNumber(newValue);
    }
  },
  methods: {
    formatInput(value) {
      this.rawValue = value.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },
    formatNumber(value) {
      return value.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }
  },
  computed: {
    inputValue: {
      // 获取格式化后的值显示在输入框内
      get() {
        return this.formattedValue;
      },
      // 将格式化后的值赋回给rawValue，以便watcher可以更新formattedValue
      set(value) {
        this.rawValue = value;
      }
    }
  }
};
</script>

在这个示例中，我们使用了el-input组件的v-model来绑定一个计算属性inputValue。这个计算属性的get方法返回格式化后的值，而它的set方法将值重新赋值给一个名为rawValue的数据属性。

通过watcher监听rawValue的变化，每当用户输入时，我们都会调用formatInput方法来格式化输入值。formatInput方法会清除非数字字符，并使用正则表达式添加千分位。

formatNumber方法用于格式化数字，它也会被watcher调用，以确保如果输入值是通过代码设置的，它也会正确地格式化。