Web前端-vue element UI el-select选择框选择el-option触发事件
需求:有两个select下拉框,选择其中一个select中的el-option值之后,更新另一个select的数据源数组这里需要注意的是参数key,value对应:key="dict.dictValue":label="dict.dictLabel":value="dict.dictValue"this.inspectTimeOption = [{dictValue: '1', dictLabel
·
需求:有两个select下拉框,选择其中一个select中的el-option值之后,更新另一个select的数据源数组
这里需要注意的是参数key,value对应
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
this.inspectTimeOption = [
{dictValue: '1', dictLabel: '1'}
]
<el-form-item label="巡检类型" prop="inspectType" >
<el-select v-model="form.inspectType" @change="selectInspectType(form.inspectType)" clearable style="width:380px" placeholder="请选择">
<el-option
v-for="dict in inspectTypesOption"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="巡检时间" prop="inspectTime">
<el-select v-model="form.inspectTime" @change="selectInspectType(form.inspectType)" clearable style="width:380px" placeholder="请选择">
<el-option
v-for="dict in inspectTimeOption"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
<script>
data () {
// 巡检类型
inspectTypesOption:[],
// 巡检时间
inspectTimeOption:[],
form: {
inspectType:''
}
},
methods: {
selectInspectType(inspectType){
console.log("当前巡检类型 :" + inspectType);
if (inspectType == '1'){
// 巡检时间
this.inspectTimeOption = [
{dictValue: '1', dictLabel: '1'},
{dictValue: '2', dictLabel: '2'},
{dictValue: '3', dictLabel: '3'},
{dictValue: '4', dictLabel: '4'},
{dictValue: '5', dictLabel: '5'}
]
}else {
// 巡检时间
this.inspectTimeOption = [
{dictValue: '6', dictLabel: '6'},
{dictValue: '7', dictLabel: '7'},
{dictValue: '8', dictLabel: '8'}
]
}
}
},
}
</script>
更多推荐
已为社区贡献7条内容
所有评论(0)