在使用select 选择框时,2个select 怎么关联在一起
<template>
<div>
<el-form :inline="true" :model="filters">
<el-form-item>
<el-select v-model="filters.value1" clearable placeholder="请选择" @change="getRole($event)">
<el-option
v-for="item in select1"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="filters.value2" filterable
placeholder="请输入查询内容" :loading="loading" @change="getList($event)">
<el-option
v-for="item in select2"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
select1: [
{value: 'role', label: '角色'},
{ value: 'version', label: '角色版本号'},
{value: 'env', label: '环境'}
],
loading: false,
filters: {
value1: '',
value2: ''
},
select2:[],
options1:''
}
},
methods: {
getRole (prov) {
let allrole= [
{pro:'role',label: 'pub'},{pro: 'role',label: 'core'},
{pro:'env',label: 'test'},{pro: 'pro',label: 'pro'},
{pro:'version',label: '1.1.2'},{pro: 'version',label: '1.1.1'}
]
let roles = []
this.select2= []
for (var val of allrole) {
if (prov===val.pro) {
console.log(val)
roles.push({label: val.label,value: val.label})
}
this.select2 = roles
}
},
getList (opt) {
console.log(opt)
}
}
}
</script>