vue如何監(jiān)聽(tīng)el-select選擇值的變化

更新時(shí)間：2022年04月07日 15:04:09 作者：＊且聽(tīng)風(fēng)吟

這篇文章主要介紹了vue如何監(jiān)聽(tīng)el-select選擇值的變化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

監(jiān)聽(tīng)el-select選擇值的變化

最近項(xiàng)目中需要用到監(jiān)聽(tīng) el-select 選擇值的改變

方法很簡(jiǎn)單@change就可以實(shí)現(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ā)生變化，就會(huì)觸發(fā)currStationChange事件：

currStationChange(val) {
? ? ? console.log('currStationChange', val)
? ? ? if (val) {
? ? ? ? this.queryUnit(val)
? ? ? } else {
? ? ? ? // 所屬?gòu)S站沒(méi)有值，清空操作單元的值
? ? ? ? this.formData.unitId = null
? ? ? ? // 所屬?gòu)S站沒(méi)有值，清空操作單元下拉框選項(xiàng)
? ? ? ? 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ù)無(wú)法顯示的問(wèn)題（在觸發(fā)事件 ? ? ? ? ? ?中需要重新初始化）
? ? ? ? ? this.roundChartFn()
? ? ? ? })
? ? ? }
? ? },

方法二

此方法默認(rèn)選擇第一天數(shù)據(jù)時(shí)會(huì)顯示第一條數(shù)據(jù)的id，目前自己還沒(méi)有解決

<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ù)字段名來(lái)寫
? ? ? ? this.deptPersonName = this.deptPersonValue.name
? ? ? ? //邏輯判斷
? ? ? ?this.deptPersonName = arr.length == 0 ? '張靜' : arr[0].name
? ? ? }
? ? },

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: