When using the select box, how are the two selects linked together?

When using the select box, how are two selects related together (the first value changes, and the second select value changes with the first one)

两个输入框代码

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