快捷導(dǎo)航

vue實(shí)現(xiàn)兩級(jí)select聯(lián)動(dòng)+input賦值+select選項(xiàng)清空

更新時(shí)間：2024年08月28日 16:54:26 作者：迪爾~

這篇文章主要介紹了vue實(shí)現(xiàn)兩級(jí)select聯(lián)動(dòng)+input賦值+select選項(xiàng)清空過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue兩級(jí)select聯(lián)動(dòng)+input賦值+select選項(xiàng)清空

功能描述

根據(jù)select1的選項(xiàng)改變select2的選項(xiàng)，同時(shí) 根據(jù)select2的選項(xiàng)給input上的時(shí)間附上對(duì)應(yīng)的值，當(dāng)select1清空時(shí)將select2和input的值也進(jìn)行清空

Java傳輸數(shù)據(jù)：

id（類型：Integer）
dictKey（類型：String）
dictValue（類型：String）
dictTime（類型：Date）

時(shí)間用于對(duì)input賦值

(格式： (pattern = “yyyy-MM-dd HH:mm:ss”, timezone = “Asia/Shanghai”))

       <el-form-item label="課程類型：" prop="courseType">
        <el-select v-model="form.courseType" clearable placeholder="請(qǐng)選擇" :validate-event="true" @change='getValue($event)'>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
     <el-form-item label="培訓(xùn)名稱：" prop="courseId">
        <el-select v-model="form.courseId" placeholder="請(qǐng)選擇培訓(xùn)名稱(課題)" :validate-event="true"  ref="vendorId" @change='getTitle'>
          <el-option v-for="item in titleList" :key="item.id" :value="item.dictKey"  :label="item.dictValue"></el-option>
        </el-select>
      </el-form-item>
     <el-form-item label="參訓(xùn)時(shí)間：" prop="trainingTime">
        <el-date-picker :disabled="true" v-model="form.trainingTime" type="datetime" placeholder="選擇日期" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>

效果圖：

因?yàn)闀r(shí)間是從后臺(tái)獲取的，所以設(shè)置為用戶無(wú)法修改

加入select中的數(shù)據(jù)

（該數(shù)據(jù)是在前臺(tái)加入的 select2是根據(jù)數(shù)據(jù)庫(kù)返回的數(shù)據(jù)而變化的）

      return {
        titleList: [],//課程類型
        trainingTime:null,
        trainingLocation:null,
       options: [{
          value: 'study',
          label: '學(xué)習(xí)專題'
        }, {
          value: 'online',
          label: '線上培訓(xùn)'
        }, {
          value: 'offline',
          label: '線下培訓(xùn)'
        }],
        value:''
           }

效果圖：

點(diǎn)擊事件

      //獲取選項(xiàng)值 判斷是否有值 根據(jù)有無(wú)值是否調(diào)用鏈接
      getValue(event){
      //當(dāng)event等于0時(shí)，可能有兩種情況 
      //1.剛進(jìn)入頁(yè)面，select1沒(méi)有選中選項(xiàng)
      //2.選完了，用戶將該選項(xiàng)數(shù)據(jù)清空了 
      //2情況如果只清除select1的值那么已選的select2和input的值都還在
      //如果用戶保存了會(huì)造成數(shù)據(jù)錯(cuò)誤 所以在清除select1的同時(shí)也要清除select2和input的值
        if(event.length==0){
           //清除select1的值
           this.form.title=null
           //清除select2中所有的選項(xiàng)和值
           this.$set(this.form, 'courseId', '')
           //清除input的值
           this.form.trainingTime=null
        }else if(event.length!=0){
       //不為空時(shí)將根據(jù)select的選項(xiàng)進(jìn)項(xiàng)數(shù)據(jù)查詢
           dictApi.dictListByCode1(event).then(re => {
          //根據(jù)this.titleList.length是否有值清除對(duì)應(yīng)的值 和上面原因類似
           if(this.titleList.length!=0){
           this.$set(this.form, 'courseId', '')
           this.form.trainingTime=null
           this.titleList.length = 0;
          this.form.title=null
           }
          //給titleList附上查詢后的返回值
        this.titleList = re.response
           })
        }
      }, 
      getTitle(e) {
        this.titleList.map((item, i) => {
         if (item.dictKey == e) {
        //根據(jù)select所選的值給input賦上對(duì)應(yīng)的值
          this.form.trainingTime=item.dictTime     
          this.form.title= item.dictValue
          
        }
      });
    },