前端 - 如何在 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);}