element的多级选中_element-ui select 二级联动

在使用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的二级联动