vue elementUI el-select 同時(shí)獲取label 和 value 的值.

前端調(diào)用后端接口時(shí),后端保存數(shù)據(jù),有時(shí)需要前端提交select選擇的 lable(name)和 value(code),所以我們需要想辦法解決,怎么同時(shí)獲取lable和value。
解決辦法:
el-option 綁定value的時(shí)候,同時(shí)綁定lable和value(分隔符隔開自定義一下就行)。這樣 el-select v-model 綁定的最終值是 lable 和 value,我們?cè)谔峤坏臅r(shí)候,把v-model綁定的值(字符串),分割成數(shù)組。數(shù)組的下標(biāo)0是lable,下標(biāo)1是value。
代碼:

<el-select v-model="selectValue" placeholder="請(qǐng)選擇" size="small">
            <el-option v-for="item in list"  :key="item.value" :label="item.lable" :value="`${item.lable}|${item.vaue}`">
            </el-option>
  </el-select>

在獲取的時(shí)候

let [lable,vaue] = this.selectValue.split('|') // es6 數(shù)組解構(gòu)賦值

另外一個(gè)解決辦法是 給 el-select change 事件,不足之處,需要多定義一個(gè)變量和方法。

感興趣的朋友可以點(diǎn)擊下方連接查看。
vue elementUI el-select 同時(shí)獲取label 和 value 的值

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容