element el-select 两个选择框存在所属关系(二级下拉)

妖狐艹你老母 2021-09-01 10:16 829阅读 0赞

### 需求 ###

`有A，B两个品牌，A品牌下面，是A的商品。B品牌下面，是B的商品。选了品牌之后，才可以选商品`

### 数据结构 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]

### 效果图 ###

![在这里插入图片描述][20200912111950675.gif_pic_center]

### 分析 ###

1.  只有选了品牌商，才知道这个品牌商下面要放什么商品的数据
2.  品牌商被选中这个时机是怎么触发的
3.  根据什么条件，去做品牌商的商品的一个匹配

### 实现 ###

1.  触发品牌商被选中的时机，是一个`@change=""`事件。这个事件里面的方法`默认`会带一个参数，就是你所选中品牌的code(这个值也是你要传给后端的)
2.  然后去循环你的数据，通过code找出,当前点击的是哪个品牌
3.  然后将当前品牌里的商品，进行赋值

### 代码 ###

<el-form-item label="品牌商" class="brand_rule">
              <el-select
                v-model="ruleAddForm.BrandCode"
                placeholder="请选择品牌商"
                @change="subordinateChange"
              >
                <el-option
                  v-for="(item, index) in BrandsList"
                  :key="index"
                  :value="item.BrandCode"
                  :label="item.BrandName"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品" class="brand_rule">
              <el-select v-model="ruleAddForm.Uid" placeholder="请选择商品">
                <el-option
                  v-for="(item, index1) in ProductsList"
                  :key="index1"
                  :value="item.Uid"
                  :label="item.Name"
                ></el-option>
              </el-select>
            </el-form-item>

##### 方法 #####

// 两个下拉框，存在子集关系
        subordinateChange (code) { 
          this.ProductsList = []
          this.ruleAddForm.Uid = ''
          this.ruleModifyData.Uid = ''
          for (const item of this.BrandsList) { 
            if (code === item.BrandCode) { 
              this.ProductsList = item.Products
            }
          }
        },

### 注意点 ###

1.  在 里绑定change事件
2.  这三个地方，一定要仔细填，认真填  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 1]
3.  每次重新选商品，会把code展示出来，而不是展示商品，所以在你每次点击品牌的时候，要将商品的数据重新置空
4.  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/fad86588b924420db32ad45722042654.png
[20200912111950675.gif_pic_center]: /images/20210813/0a4dc11b4df24eafa9e7842afe46111b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/c104884b1082444f93c5d26319b52099.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210813/6b2987edad3943dc99559e447a61f79c.png