元素-界面中选择组件绑定值变化触发的变化事件方法

1.安装vuecli脚手架

2.终端输入

Cnpm i元素-ui -S安装元素-ui

3.根据需要引入精选组件

用main.js编写以下代码

/*导入第三方库*/导入‘element-ui/lib/theme-粉笔/index . CSS’；//从' element-ui ' vue . use(select)vue . use(option)vue . use(dialog)vue . use(button)//vue.component(Select . name，Select)加载Select组件导入{select，option，dialog，button }；//写成Vue.use(Button)/*导入第三方库结束*/HelloWorld.vue代码

template div El-dialog title=' prompt ' : visible . sync=' dialog visible ' width=' 30% ' span { { selval } }/span span slot=' footer ' class=' dialog-footer ' El-button @ click=' dialog visible=false ' cancel/El-button类型=' primary ' @ click=' dialog visible=false ' ok/El-button/span/El-dialog El-select v-model=' value ' multiple placeholder='请选择' @ change=' currentsel 'value ' : label=item . label ' : value=' item . label '/El-Option/El-select/div/模板脚本导出默认值{ data(){ return { options :[{value : ' Option 1 '，Label: ' Golden Cake ' }，{value:' Option 2 '，label:' Double Skin Milk' }，{ value 3: ' Option 3 '，Label: '蚝油蛋卷' }，{ value :selval=selvalthis.dialogVisible=true} } }/脚本

扩展知识：点击元素界面上的编辑，弹出对话框组件中选择组件绑定值变化的方法，不触发变化事件

代码结构如下：

现象视频如下：

现象原因：经调查发现，此时点击操作并未触发chang事件，后台响应数据中也没有订单取消原因orderCanleRemark字段，导致此时未触发Chang事件。

解决方案：

方案一：让后台协同响应这个字段，响应这个字段是否为空

方案2:在将此字段分配给此表单之前，手动将其添加到后台响应数据中

代码如下：

上述元素ui中的select组件的绑定值发生了变化，触发变化事件的方法就是边肖与大家分享的全部内容。希望能给大家一个参考，多支持我们。