vue如何監(jiān)聽el-select選擇值的變化
監(jiān)聽el-select選擇值的變化
最近項目中需要用到監(jiān)聽 el-select 選擇值的改變
方法很簡單@change就可以實現(xiàn)
<el-select clearable ? ? ? ? ? ? ? ? ? ? ? ?v-model="formData.stationId" ? ? ? ? ? ? ? ? ? ? ? ?@change="currStationChange" ? ? ? ? ? ? ? ? ? ? ? ?:placeholder="$t('deviceManage.device.dlg.stationId')"> ? ? ? ? ? ? ? <el-option v-for="item in stationOption" ? ? ? ? ? ? ? ? ? ? ? ? ?:key="item.value" ? ? ? ? ? ? ? ? ? ? ? ? ?:label="item.label" ? ? ? ? ? ? ? ? ? ? ? ? ?:value="item.value"> ? ? ? ? ? ? ? </el-option> </el-select>
@change綁定了currStationChange
如果el-select選中的值發(fā)生變化,就會觸發(fā)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有些數(shù)據(jù)無法顯示的問題(在觸發(fā)事件 ? ? ? ? ? ?中需要重新初始化) ? ? ? ? ? this.roundChartFn() ? ? ? ? }) ? ? ? } ? ? },
方法二
此方法默認選擇第一天數(shù)據(jù)時會顯示第一條數(shù)據(jù)的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" ? ? ? ? ? ? ? ? ? ? ? ? :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根據(jù)后端數(shù)據(jù)字段名來寫 ? ? ? ? this.deptPersonName = this.deptPersonValue.name ? ? ? ? //邏輯判斷 ? ? ? ?this.deptPersonName = arr.length == 0 ? '張靜' : arr[0].name ? ? ? } ? ? },
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
VUE對Storage的過期時間設(shè)置,及增刪改查方式
這篇文章主要介紹了VUE對Storage的過期時間設(shè)置,及增刪改查方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02Vue-router路由判斷頁面未登錄跳轉(zhuǎn)到登錄頁面的實例
下面小編就為大家?guī)硪黄猇ue-router路由判斷頁面未登錄跳轉(zhuǎn)到登錄頁面的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10vue3利用v-model實現(xiàn)父子組件之間數(shù)據(jù)同步的代碼詳解
在Vue 3中,v-model這一指令也得到了升級,使得父子組件之間的數(shù)據(jù)同步變得更加容易和靈活,本文將探討一下Vue 3中如何利用v-model來實現(xiàn)父子組件之間的數(shù)據(jù)同步,需要的朋友可以參考下2024-03-03vue+vuex+axios實現(xiàn)登錄、注冊頁權(quán)限攔截
下面小編就為大家分享一篇vue+vuex+axios實現(xiàn)登錄、注冊頁權(quán)限攔截,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03