如何在 Vue 中实现 Excel 格式的输入与显示?

Question

请问 Vue 可以做到 input 显示 2位小数，但实际是5位小数值，像excel?

举例: excel可以在单元格输入 1.23456，显示时只会显示 1.23 二位小数，但运算时还是使用 1.23456 去计算
目前能在 vue change 时用 round 近位到 2 位小数，但是实际值也被更改成 1.23

Answer 1

可以将input 封装起来，将 v-model 绑定的值换成 computed 里面的一个变量，通过get去改变显示内容。

...
v-model="inputVal"
...

props: ['value'],
computed: {
    inputVal: {
      get() {
        // @todo 这里做修改
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
}

Answer 2

Vue3简单实现提供思路:

  <el-input
    @input="input"
    @change="change"
    v-model="inputObj.showValue"
  ></el-input>

const inputObj = reactive({
  showValue: '',
  value: '',
});

function input(val: string) {
  inputObj.value = val;
}

function change(val: string) {
  inputObj.showValue = String(
    Math.round(Number(val) * 100) / 100
  );
  console.log(inputObj.value);
}