前端 - 如何解决 Element UI 计数器在减号被点击后加号无法使用的问题？

Question

<el-table-column prop="service_num" label="售后数量" width="160">
<template slot-scope="scope">

 <el-input-number v-model="scope.row.service_num" @change="handleChange" :min="1"                 :max="scope.row.service_num" size="mini"></el-input-number></template>

</el-table-column>

element ui计数器，最大值为service_num后台返回的值，假设后台返回为5，这个计数器为1-5，小于等于1时减符号不能用，大于等于5时加符号不能用，现在问题是点击减符号后加符号不能使用了，有什么解法吗？

Answer 1

你的v-model和max绑定的是同一个数据，改变v-model就是在改变max，这不合理，最大值就是最大值，不应该跟着v-model去变，应该复制一份再使用

Answer 2

你的问题是关于 Element UI 的计数器在点击减号后加号无法使用的问题。从你提供的代码中，我注意到你的计数器使用了 min 和 max 属性，这两个属性限制了计数器的值。当计数器的值达到最小值时，减号会被禁用，当计数器的值达到最大值时，加号会被禁用。

然而，你的问题是在点击减号后加号被禁用了。这可能是因为你的 handleChange 方法没有正确处理这种情况。当计数器的值小于最小值时，你需要将计数器的值设置为最小值，而不是让加号失效。

你可以尝试修改 handleChange 方法，使其在计数器的值小于最小值时将其设置为最小值，而不是禁用加号。下面是一个可能的实现：

methods: {  handleChange(value, row) {    if (value < 1) {      this.$message.error('售后数量不能小于1！');      return;    }    if (value > row.service_num) {      this.$message.error('售后数量不能超过' + row.service_num + '！');      return;    }    // 更新服务数量    row.service_num = value;  }}

在这个方法中，我们首先检查计数器的值是否小于最小值（1）。如果是，我们显示一个错误消息，并返回，不更新计数器的值。然后，我们检查计数器的值是否大于最大值（row.service_num）。如果是，我们也显示一个错误消息，并返回，不更新计数器的值。如果计数器的值在有效范围内，我们就更新服务数量。

这样修改后，即使你点击减号将计数器的值减少到最小值，加号也不会被禁用。