element-ui select 二级联动

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

 两个输入框代码

          
             
                
                
            
            
                
            
          
          
            查询
          
        

　　

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

转载于:https://www.cnblogs.com/mandywang/p/10456240.html