element-ui select 二级联动

在使用select 选择框时，2个select 怎么关联在一起（第一个值发生变化，第二个select值随第一变化而不同）

[图片上传中...(2.png-ed6932-1551410566593-0)]

2.png

两个输入框代码

 <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-item>
            <el-button type="primary" size="medium" @click="fetchData('filters')"  icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>

首先第一个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的二级联动