vue select組件的使用與禁用實(shí)現(xiàn)代碼
業(yè)務(wù):消息推送方式有兩種,為“微信”和“郵件”,微信發(fā)送時(shí)需要選擇“要發(fā)送的應(yīng)用程序”,郵件發(fā)送時(shí)不需要
微信發(fā)送時(shí),頁(yè)面如下:
郵件發(fā)送時(shí),選擇器不可用,頁(yè)面如下:
雖然官網(wǎng)上沒(méi)有給出具體的例子,但可從屬性中查到 “disabled”屬性,
屬性 | 說(shuō)明 | 類型 | 默認(rèn)值 |
---|---|---|---|
disabled | 是否禁用 | Boolean | false |
實(shí)現(xiàn):
添加disabled屬性,寫成如下紅色標(biāo)記格式;定義一個(gè)isAble變量,用來(lái)存放TRUE和FALSE值,決定此選擇框是否可用。
<Select <span style="color: rgb(255, 0, 0);">v-bind:disabled="isAble" </span>clearable v-model="dataAgentEntity.ID" style="width:240px"> <Option v-for="item in dataAgent" :value="item.ID" :key="item.ID">{{ item.name }}</Option> </Select> export default { data(){ return{ isAble: false,//select下拉框是否可用 } }
然后就是邏輯中操作變量isAble的值,改變組件的可用禁用狀態(tài)了
methods:{ Test(){ var vm = this; if (vm.alertType == '郵件') { vm.isAble = true; //不可用 } } }
test方法中只寫了判斷不可用,改回微信時(shí),還要變成可用狀態(tài),不然又埋了個(gè)bug,哈哈。不過(guò)這是業(yè)務(wù)邏輯了,只介紹方法,記個(gè)筆記,具體視情況而定。
總結(jié)
以上所述是小編給大家介紹vue select組件的使用與禁用實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Vue.js 2.0中select級(jí)聯(lián)下拉框?qū)嵗?/a>
- 淺談Vue Element中Select下拉框選取值的問(wèn)題
- vue.js select下拉框綁定和取值方法
- vue select二級(jí)聯(lián)動(dòng)第二級(jí)默認(rèn)選中第一個(gè)option值的實(shí)例
- vue select選擇框數(shù)據(jù)變化監(jiān)聽(tīng)方法
- vue 自定義 select內(nèi)置組件
- vue2組件之select2調(diào)用的示例代碼
- 使用Vue自定義指令實(shí)現(xiàn)Select組件
- 詳解Vue 動(dòng)態(tài)添加模板的幾種方法
- Vue動(dòng)態(tài)控制input的disabled屬性的方法
- vue動(dòng)態(tài)生成dom并且自動(dòng)綁定事件
- vue中動(dòng)態(tài)select的使用方法示例
相關(guān)文章
使用vue-cli4.0快速搭建一個(gè)項(xiàng)目的方法步驟
這篇文章主要介紹了使用vue-cli4.0快速搭建一個(gè)項(xiàng)目的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12vue項(xiàng)目拍照或上傳圖片并實(shí)現(xiàn)轉(zhuǎn)化為base64格式
這篇文章主要介紹了vue項(xiàng)目拍照或上傳圖片并實(shí)現(xiàn)轉(zhuǎn)化為base64格式方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11Vue中的ref作用詳解(實(shí)現(xiàn)DOM的聯(lián)動(dòng)操作)
這篇文章主要介紹了Vue中的ref作用詳解(實(shí)現(xiàn)DOM的聯(lián)動(dòng)操作),需要的朋友可以參考下2017-08-08vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域
這篇文章主要介紹了vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域的相關(guān)資料,及代理跨域的概念原理,需要的朋友可以參考下2018-04-04Vue Cli3 創(chuàng)建項(xiàng)目的方法步驟
Vue CLI是一個(gè)用于快速Vue.js開(kāi)發(fā)的完整系統(tǒng)。這篇文章主要介紹了Vue Cli3 創(chuàng)建項(xiàng)目的方法步驟,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-10-10Vue組件傳值過(guò)程接收不成功的問(wèn)題及解決
這篇文章主要介紹了Vue組件傳值過(guò)程接收不成功的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06Vue引入jquery實(shí)現(xiàn)平滑滾動(dòng)到指定位置
這篇文章主要介紹了Vue引入jquery實(shí)現(xiàn)平滑滾動(dòng)到指定位置的效果,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-05-05