我要评论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
}
});
},- 效果图：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论