Web前端-vue element UI el-select选择框选择el-option触发事件
Posted MinggeQingchun
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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: '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>
以上是关于Web前端-vue element UI el-select选择框选择el-option触发事件的主要内容,如果未能解决你的问题,请参考以下文章
Web前端-vue element UI el-select选择框选择el-option触发事件
web前端-vue element UI el-table,el-table-column表格添加行点击事件