zoukankan      html  css  js  c++  java
  • 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的二级联动

  • 相关阅读:
    poj 2488 DFS
    畅通工程 并查集模版
    KMP 模板
    poj 1426 DFS
    poj 2528 线段数
    poj 3468 线段数 修改区间(点)
    CVPR2012文章阅读(2)A Unified Approach to Salient Object Detection via Low Rank Matrix Recovery
    如何制定目标
    Saliency Map 最新综述
    计算机视觉模式识别重要会议杂志
  • 原文地址:https://www.cnblogs.com/mandywang/p/10456240.html
Copyright © 2011-2022 走看看