利用accounting依赖实现vue中金额千分位格式转换和el-table的格式化以及数字千分位格式化金额方法

前提自己要安装一个accounting依赖
我这里用的"accounting": "^0.4.1"版本
1、在components文件夹下新建一个index.js的文件，代码内容如下

import currencyInputComponent from "./CurrencyInput";

const currencyInput = {
    install:function(Vue){
        Vue.component("currency-input",currencyInputComponent)
    }
}
export default currencyInput

2、在components文件夹下新建一个CurrencyInput.vue的文件，代码内容如下

<template>
  <div>
    <div class="el-input el-input--small" v-bind:class="{'is-disabled':disabled}">
      <el-input type="text" prefix-icon="el-icon-edit" style="width: 100%;" v-bind:value="formatValue" v-on:input="updatevalue($event)" v-on:blur="onBlur" v-on:focus="selectAll" v-bind:disabled="disabled" ref="input">
          <template slot="prepend"><span style="color: red">*</span> {{name}}</template>
      </el-input>
    </div>
    <!-- 例子:  <currency-input v-model="ceshi" :name="'测试地址'"></currency-input>   -->
  </div>
</template>

<script>
import accounting from "accounting";
export default {
  props: {
    value: {
      type: [String, Number],
      default: 0,
      desc: "数值",
    },
    symbol: {
      type: String,
      default: "",
      desc: "货币标识符",
    },
    decimal: {
      type: Number,
      default: 2,
      desc: "小数位",
    },
    disabled: {
      type: Boolean,
      default: false,
      desc: "是否禁止",
    },
    name: {
      type: String,
    }
  },
  data() {
    return {
      focused: false,
    };
  },
  created() {
  },
  computed: {
    formatValue() {
      if (this.focused) {
        return this.value ? accounting.unformat(this.value) : "";
      } else {
        if (this.value === 0) {
          return accounting.formatMoney(this.value, this.symbol, this.decimal);
        } else if (
          this.value === "" ||
          this.value === null ||
          this.value === undefined
        ) {
          return "";
        } else {
          return accounting.formatMoney(this.value, this.symbol, this.decimal);
        }
      }
    },
  },
  watch: {
    value(val) {if (this.validateEvent) {
        this.dispatch("ElFormItem", "el.form.change", [val]);
      }
    },
  },
  methods: {
    updatevalue(value) {
      var formatvalue = !!value ? accounting.unformat(value) : "";
      this.$emit("input", formatvalue);
    },
    onBlur() {
      this.focused = false;
      this.$emit("blur");
      this.dispatch("ElFormItem", "el.form.blur", [this.value]);
    },
    selectAll(event) {
      this.focused = true;
      setTimeout(() => {
        event.target.select();
      }, 0);
    },

    dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root;
      var name = parent.$options.componentName;

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;

        if (parent) {
          name = parent.$options.componentName;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
  },
};
</script>

3、使用

<currency-input v-model="action.amt" :name="'收款金额'"></currency-input>

二：element的el-table对金额的格式化

moneyFormatter(row, column, cellValue, index) {
 if(cellValue == null) return 'null'
   let n = '';
   n = String(cellValue);
   if(!n) return n;
   let str = n.split('.');
   let re = /\d{1,3}(?=(\d{3})+$)/g;
   let n1 = str[0].replace(re, "$&,");
   return str.length > 1 && str[1] ? `${n1}.${str[1]}` : `${n1}.00`;
},

三：千分位格式化数字（这是提出给Number了）
// 千分位格式化金额

Number.prototype.moneyFormatter = function () {
    let val = '';
    val = this;
    if (this !== undefined && this !== null && this !== '') {
      if(val == null) return 'null'
      let n = '';
      n = String(val);
      if(!n) return n;
      let str = n.split('.');
      let re = /\d{1,3}(?=(\d{3})+$)/g;
      let n1 = str[0].replace(re, "$&,");
      return str.length > 1 && str[1] ? `${n1}.${str[1]}` : `${n1}.00`;
    }
  },