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

需求

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

数据结构

效果图

分析

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. 这三个地方，一定要仔细填，认真填
   
3. 每次重新选商品，会把code展示出来，而不是展示商品，所以在你每次点击品牌的时候，要将商品的数据重新置空
4.