element-ui select 二級聯動

在使用select 選擇框時，2個select 怎麼關聯在一塊兒（第一個值發生變化，第二個select值隨第一個變化而不一樣）

 兩個輸入框代碼

<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的二級聯動