快应用采坑(3)-使用差别

### el-input-number 组件常见问题及解决方法 #### 1. `el-input-number` 组件无法触发 `change` 事件，实时校验失效 当使用 `el-input-number` 组件时，发现该组件仅在失去焦点时才触发 `change` 事件，这使得输入过程中无法实现实时校验。为了实现更及时的响应机制，可以考虑监听其他事件。 对于这个问题的一个有效解决方案是在 Vue 中改用监听 `input` 或者 `blur` 事件来替代默认的 `change` 事件[^1]： ```html <template> <el-input-number v-model="num" @input="handleInput"></el-input-number> </template> <script> export default { data() { return { num: null, }; }, methods: { handleInput(value) { console.log(&#39;Value changed:&#39;, value); // 实施即时验证逻辑或其他操作 } } }; </script> ``` #### 2. 使用 `@input` 事件存在延迟现象 有开发者报告，在利用 `el-input-number` 的 `@input` 事件更新数据源（比如用于表格过滤）的时候遇到了明显的滞后情况。这种情况下可能是因为框架内部处理造成的时间差所引起的。 针对此状况建议尝试如下调整措施之一或组合应用以优化性能表现[^2]: - **减少不必要的计算**：确保绑定到模型上的属性尽可能简单高效； - **防抖动/节流阀技术**：通过引入 lodash 库中的 debounce 函数或者其他自定义方式控制函数调用频率； ```javascript import _ from &#39;lodash&#39;; // 防抖处理 const debouncedHandleChange = _.debounce((newValue) => { this.filterTable(newValue); // 更新表格筛选条件的方法 }, 300); methods: { handleChange(value){ debouncedHandleChange(value); } } ``` #### 3. 自定义步长和范围限制 有时项目需求可能会超出标准配置选项所能提供的功能，例如设置非常规增量单位或是动态改变最大最小边界等特殊场景下的数值变化规则。此时可以通过扩展 props 参数来自由定制这些行为特性。 ```html <el-input-number :min="-Infinity" :max="+Infinity" :step="anyStepFunction()" v-model="customNumber"></el-input-number> ``` 其中 `anyStepFunction()` 可返回任意合法数值得以满足特定业务逻辑的要求。