插件窝 干货文章 vue实现两级select联动+input赋值+select选项清空

vue实现两级select联动+input赋值+select选项清空

class item form select 935    来源:    2024-10-30

vue两级select联动+input赋值+select选项清空

功能描述

根据select1的选项改变select2的选项,同时 根据select2的选项给input上的时间附上对应的值,当select1清空时将select2和input的值也进行清空

Java传输数据:

  • id(类型:Integer)
  • dictKey(类型:String)
  • dictValue(类型:String)
  • dictTime(类型:Date)

时间用于对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="请选择" :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="培训名称:" prop="courseId">
        <el-select v-model="form.courseId" placeholder="请选择培训名称(课题)" :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="参训时间:" 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>
  • 效果图:

因为时间是从后台获取的,所以设置为用户无法修改

加入select中的数据

(该数据是在前台加入的 select2是根据数据库返回的数据而变化的)

      return {
        titleList: [],//课程类型
        trainingTime:null,
        trainingLocation:null,
       options: [{
          value: 'study',
          label: '学习专题'
        }, {
          value: 'online',
          label: '线上培训'
        }, {
          value: 'offline',
          label: '线下培训'
        }],
        value:''
           }
        
        
  • 效果图:

点击事件

      //获取选项值 判断是否有值 根据有无值是否调用链接
      getValue(event){
      //当event等于0时,可能有两种情况 
      //1.刚进入页面,select1没有选中选项
      //2.选完了,用户将该选项数据清空了 
      //2情况如果只清除select1的值那么已选的select2和input的值都还在
      //如果用户保存了会造成数据错误 所以在清除select1的同时也要清除select2和input的值
        if(event.length==0){
           //清除select1的值
           this.form.title=null
           //清除select2中所有的选项和值
           this.$set(this.form, 'courseId', '')
           //清除input的值
           this.form.trainingTime=null
        }else if(event.length!=0){
       //不为空时将根据select的选项进项数据查询
           dictApi.dictListByCode1(event).then(re => {
          //根据this.titleList.length是否有值清除对应的值 和上面原因类似
           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) {
        //根据select所选的值给input赋上对应的值
          this.form.trainingTime=item.dictTime     
          this.form.title= item.dictValue
          
        }
      });
    },
  • 效果图:

总结

以上为个人经验,希望对您有所帮助。