select的onChange监听不起作用问题

### 关于 Vue2 Element-UI `el-select` 的 `change` 事件 在 Vue2 和 Element-UI 中，`el-select` 是一个常用的组件，用于实现下拉框功能。其核心事件之一是 `@change` 或者绑定到 `v-on:change` 上的回调函数[^1]。 #### 基本用法 `el-select` 的 `change` 事件会在用户选择某个选项时触发，并传递所选值作为参数给监听器。以下是基本示例： ```vue <template> <div> <el-select v-model="selectedValue" @change="handleChange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> </template> <script> export default { data() { return { selectedValue: '', options: [ { value: 'option1', label: 'Option One' }, { value: 'option2', label: 'Option Two' } ] }; }, methods: { handleChange(value) { console.log('Selected Value:', value); } } }; </script> ``` 上述代码展示了如何监听 `el-select` 的变化并处理相应的逻辑。 --- #### 动态加载更多数据 如果需要实现在滚动到底部时动态加载更多的选项，则可以通过自定义指令完成此操作。例如，在引用中提到的方法如下所示： ```javascript export default { directives: { 'el-select-loadmore': { bind(el, binding) { const SELECT_WRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap'); SELECT_WRAP_DOM.addEventListener('scroll', function () { const condition = this.scrollHeight - this.scrollTop <= this.clientHeight; if (condition) { binding.value(); } }); } } } }; ``` 该方法通过监听 `.el-select-dropdown__wrap` 元素的滚动事件，判断是否到达底部并调用绑定的回调函数。 --- #### 表单动态验证问题 针对表单中的动态验证需求（如发布日期的选择），可以采用以下解决方案。由于直接更改 `rules` 并不会实时更新校验规则，因此推荐使用条件渲染的方式重新初始化整个表单项[^2]。 ##### 实现思路 1. 使用计算属性生成动态校验规则。 2. 当依赖的数据发生变化时，强制刷新表单项以应用新的规则。 以下是具体代码示例： ```vue <template> <el-form :model="form" :rules="dynamicRules" ref="formRef"> <el-form-item prop="timeType"> <el-select v-model="form.timeType" @change="handleTimeTypeChange"> <el-option label="今天" value="today"></el-option> <el-option label="24小时" value="hour24"></el-option> <el-option label="近3天" value="days3"></el-option> <el-option label="近7天" value="days7"></el-option> <el-option label="自定义时间" value="custom"></el-option> </el-select> </el-form-item> <el-form-item v-if="form.timeType === 'custom'" prop="customDateRange"> <el-date-picker v-model="form.customDateRange" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" required /> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { timeType: 'today', customDateRange: null, }, }; }, computed: { dynamicRules() { let rules = {}; if (this.form.timeType === 'custom') { rules['customDateRange'] = [{ required: true, message: '请选择日期范围', trigger: 'blur' }]; } return rules; } }, methods: { handleTimeTypeChange() { this.$refs.formRef.clearValidate(); // 清除之前的校验状态 } } }; </script> ``` 在此方案中，每当 `timeType` 改变时都会重新评估 `dynamicRules` 计算属性，从而确保校验规则能够及时更新。 --- #### 自定义表格校验 对于更复杂的场景，比如在 `el-table` 中嵌套输入控件并添加校验支持，通常需要借助 `ref` 手动控制子组件实例的状态。详情参见相关文档或案例[^3]。 --- ### 总结 以上介绍了 `el-select` 的基础用法及其扩展技巧，包括动态加载、表单动态校验等内容。希望这些信息能帮助您更好地理解和解决问题。