在使用select 选择框时,2个select 怎么关联在一起(第一个值发生变化,第二个select值随第一变化而不同)
[图片上传中...(2.png-ed6932-1551410566593-0)]
2.png
两个输入框代码
v-for="item in select1"
:key="item.value"
:label="item.label"
:value="item.value">
placeholder="请输入查询内容" :loading="loading" @change="getList($event)">
v-for="item in select2"
:key="item.value"
:label="item.label"
:value="item.value">
查询
首先第一个select要和第二个select 的值关联在一起
let select1= [
{value: 'role', label: '角色'},
{ value: 'version', label: '角色版本号'},
{value: 'env', label: '环境'}
]
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'}
]
显示操作代码块
export default {
data () {
return {
select1: select1,
loading: false,
filters: {
value1: '',
value2: ''
},
select2:[]
}
},
methods: {
getRole (prov) {
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.options1 = roles
}
},
getList (opt) {
console.log(opt)
}
}
}
这样就实现了select的二级联动