element ui的el-input-number修改数值失效的问题及解决

针对“element-ui的el-input-number修改数值失效的问题及解决”这个问题，我可以给出如下的完整攻略。攻略中包含了问题出现的原因、解决方法、示例说明等内容。

问题背景

在使用 element-ui 的 el-input-number 组件时，我们可能会遇到一个问题：在表单中使用该组件后，我们无法通过键盘输入数字来修改数值，只能通过上下箭头或者鼠标滚轮来进行操作。

这个问题可能出现的原因是：我们在定义表单时，默认为该组件禁用了 controls 属性，或者 controls 属性被覆盖了。这会导致 el-input-number 的输入框失去了对键盘事件的监听，从而无法通过键盘输入进行修改。接下来，我将详细介绍这个问题的解决方法。

解决方法

要解决这个问题，我们需要设置 controls 属性为 true。同时，也要确保输入框的 readonly 属性为 false，以便允许键盘输入。

以下是一个 el-input-number 组件的示例代码：

<el-form-item label="数量">
  <el-input-number v-model="quantity" :controls="true" :readonly="false" />
</el-form-item>

在上述代码中，我们通过设置 :controls="true" 将控制器开启，并通过 :readonly="false" 来允许键盘输入。

示例说明

这里给出两个使用 el-input-number 组件的示例：

示例一

<el-form ref="form" :model="formData" label-width="120px">
  <el-form-item label="商品名称">
    <el-input v-model="formData.name" />
  </el-form-item>
  <el-form-item label="数量">
    <el-input-number v-model="formData.quantity" :controls="true" :readonly="false" />
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交表单</el-button>
  </el-form-item>
</el-form>

在这个示例中，我们定义了一个表单，并在表单中使用了 el-input-number 组件，将其绑定到表单数据中的 quantity 属性上。同时，我们通过设置 :controls="true" 和 :readonly="false" 两个属性来确保键盘输入和控制器的开启。

示例二

<template>
  <div>
    <div>当前数量为：{{ quantity }}</div>
    <el-input-number v-model="quantity" :controls="true" :readonly="false" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      quantity: 10,
    };
  },
};
</script>

在这个示例中，我们定义了一个数字输入框，并将其绑定到数据中的 quantity 属性上。同样地，我们通过设置 :controls="true" 和 :readonly="false" 两个属性来确保键盘输入和控制器的开启。