目次vue两级select联动+input赋值+select选项清空功能形貌根据select1的选项改变select2的选项，同时 根据select2的选项给input上的时间附上对应的值，当select1清空时将select2和input的值也举行清空 Java传输数据：
时间用于对input赋值(格式： (pattern = “yyyy-MM-dd HH:mm:ss”, timezone = “Asia/Shanghai”)) [code] <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>[/code]
由于时间是从背景获取的，以是设置为用户无法修改
到场select中的数据（该数据是在前台到场的 select2是根据数据库返回的数据而变化的） [code] return { titleList: [],//课程类型 trainingTime:null, trainingLocation:null, options: [{ value: 'study', label: '学习专题' }, { value: 'online', label: '线上培训' }, { value: 'offline', label: '线下培训' }], value:'' } [/code]
点击事件[code] //获取选项值 判断是否有值 根据有无值是否调用链接 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 } }); },[/code]
总结以上为个人履历，希望能给大家一个参考，也希望大家多多支持脚本之家。 来源：https://www.jb51.net/javascript/3266409k8.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 09:13 , Processed in 0.038224 second(s), 19 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
