elementui change

ElementUI 的 change 事件

ElementUI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件。change 事件是许多组件中常用的交互事件，用于监听用户操作导致的值变化。

常见组件的 change 事件

1. Select 选择器

   

   • 当选中值发生变化时触发 change 事件。
   • 参数为新选中的值。

   <el-select v-model="value" @change="handleChange">
     <el-option label="选项1" value="1"></el-option>
     <el-option label="选项2" value="2"></el-option>
   </el-select>

   methods: {
     handleChange(value) {
       console.log('选中的值:', value);
     }
   }

2. Checkbox 多选框

   • 当绑定值变化时触发 change 事件。
   • 参数为更新后的值。

   <el-checkbox v-model="checked" @change="handleCheckboxChange">选项</el-checkbox>

3. Radio 单选框

   

   • 当绑定值变化时触发 change 事件。
   • 参数为选中的 Radio 的 label 值。

   <el-radio v-model="radio" label="1" @change="handleRadioChange">选项1</el-radio>

4. Input 输入框

   • 当输入框失去焦点或用户按下回车时触发 change 事件。
   • 参数为当前输入值。

   <el-input v-model="input" @change="handleInputChange"></el-input>

5. Switch 开关

   • 当开关状态变化时触发 change 事件。
   • 参数为新状态的值。

   <el-switch v-model="switchValue" @change="handleSwitchChange"></el-switch>

使用注意事项

• change 事件通常与 v-model 配合使用，但 v-model 的更新可能略微滞后于事件触发。
• 某些组件（如 DatePicker）的 change 事件可能携带额外参数，需查阅具体文档。

与 input 事件的区别

• input 事件在值每次变化时立即触发（如输入框的每次按键）。
• change 事件通常在值确定变化后触发（如输入框失去焦点时）。

通过合理使用 change 事件，可以实现对用户交互的精确响应，提升应用体验。