<
>

vue如何监听el-select选择值的变化

2022-04-18 14:32:29 来源:易采站长站 作者:

目录
监听el-select选择值的变化方法很简单@change就可以实现@change绑定了currStationChangeel-select将选中的值传递到需要的位置方法一方法二

监听el-select选择值的变化

最近项目中需要用到监听 el-select 选择值的改变

方法很简单@change就可以实现

<el-select clearable           v-model="formData.stationId"           @change="currStationChange"           :placeholder="$t('deviceManage.device.dlg.stationId')">       <el-option v-for="item in stationOption"            :key=ge

如果el-select选中的值发生变化,就会触发currStationChange事件:

currStationChange(val) {   console.log('currStationChange', val)   if (val) {    this.queryUnit(val)   } else {    // 所属厂站没有值,清空操作单元的值    this.formData.unitId = null    // 所属厂站没有值,清空操作单元下拉框选项    this.unitTree = []   }}

el-select将选中的值传递到需要的位置

方法一

<el-form-item label="选择员工">    <el-select v-model="deptPersonValue" @change="changeDeptValue">        <el-option v-for="item in employeeList" :key="item.employeeId"             :label="item.name" :value="item.employeeId">        </el-option>    </el-select></el-form-item><p style="font-size:28px; margin-top:40px">{undefined{deptPersonName}}</p>
changeDeptValue(setval) {undefined    console.log(setval)    let arr = this.employeeList.filter(item => {undefined     return item.employeeId == this.deptPersonValue    //逻辑判断   this.deptPersonName = arr.length == 0 ? '张静' : arr[0].name    this.$nextTick(() => {undefined    //在这里处理echars图片资源使用v-show或者v-if有些数据无法显示的问题(在触发事件      中需要重新初始化)     this.roundChartFn()    })   }  },

方法二

此方法默认选择第一天数据时会显示第一条数据的id,目前自己还没有解决

<el-form-item label="选择员工">    <el-select v-model="deptPersonValue" @change="changeDeptValue"        value-key="value">        <el-option v-for="item in employeeList" :key="item.employeeId"           nGRmdwe  :label="item.name" :value="item">        </el-option>    </el-select></el-form-item><p style="font-size:28px; margin-top:40px">{undefined{deptPersonName}}</p>
changeDeptValue(setval) {undefined    console.log(setval)    //这里的name根据后端数据字段名来写    this.deptPersonName = this.deptPersonValue.name    //逻辑判断   this.deptPersonName = arr.length == 0 ? '张静' : arr[0].name   }  },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。 

暂时禁止评论

微信扫一扫

易采站长站微信账号