场景:有时候有a,b,c三个下拉选项,b依赖a的选择,c依赖b的选择。本文实现了两级联动,三级联动同理实现
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>选择脚本</span>
</div>
<div style="height:180px;">
<el-form ref="scriptConfigForm" :model="scriptConfigForm">
<el-form-item label="项目">
<el-select
v-model="scriptConfigForm.project"
size="small"
style="width:70%"
filterable
remote
reserve-keyword
:remote-method="remoteProjectMethod"
:loading="projectLoad"
@visible-change="handleChangeFlag"
>
<el-option
v-for="item in projectOptions"
:key="item.value"
:value="item.value"
:label="item.label"
/>
</el-select>
</el-form-item>
<el-form-item label="脚本">
<el-select
v-model="scriptConfigForm.script"
size="small"
style="width:70%"
@visible-change="handleChangeFlag"
>
<el-option
v-for="item in scriptOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-form>
</div>
</el-card>
export default {
data() {
return {
scriptConfigForm: {
project: '',
script: '',
appids: ''
},
changeFlag: false
}
watch: {
'scriptConfigForm.project'(e) {
if (this.changeFlag) {
this.scriptConfigForm.script = ''
}
if (e) {
this.scriptOptions.splice(0, this.scriptOptions.length)
this.fetchListScript(e)
}
}
},
methods:{
fetchListScript(projectId) {
fetchListScript(projectId).then(res => {
for (var script of res.data.content) {
this.scriptOptions.push({
value: script.id,
label: script.filename
})
}
})
},
handleChangeFlag(type) {
// select回调,判断当前下拉框是否展示
this.changeFlag = type
}
}
}
通过watch监控字段变化
【可实现】
通过change监控值变化
【可实现】