elementplus 数字输入框设置百分比

在Element Plus库中，如果你想在一个数字输入框里设置成百分比格式，你可以使用`el-input-number`组件，并配合自定义的v-model绑定值。以下是一个简单的示例：

<template>
  <el-form-item label="百分比输入">
    <el-input-number v-model.number="percentage" :controls="[false]" placeholder="请输入百分比(0.00%)"></el-input-number>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      percentage: 0, // 初始值设为0
    };
  },
};
</script>

在这个例子中，`v-model.number="percentage"`用于双向数据绑定，并指定值为数值类型 (`number`). `:controls="[false]"` 阻止了默认的键盘控制，防止用户直接输入非数字字符。

如果你想要限制输入范围在0到100%，可以添加一个计算属性或者在`watch`中监听变化来做验证：

computed: {
  validPercentage() {
    return this.percentage >= 0 && this.percentage <= 100;
  }
},
watch: {
  percentage(newVal) {
    if (newVal < 0 || newVal > 100) {
      this.percentage = newVal > 100 ? 100 : 0; // 将超出范围的值调整回来
    }
  },
},