根据select1的选项改变select2的选项,同时 根据select2的选项给input上的时间附上对应的值,当select1清空时将select2和input的值也进行清空
Java传输数据:
id
(类型:Integer)dictKey
(类型:String)dictValue
(类型:String)dictTime
(类型:Date)(格式: (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>
因为时间是从后台获取的,所以设置为用户无法修改
(该数据是在前台加入的 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 } }); },
以上为个人经验,希望对您有所帮助。