elementui 一个选择框根据另一个选择框所选内容的改变而改变，但是选择后原数据没有清除的问题

先说问题。
我们在项目中时常会写一些选项之间相互联系的内容，如下


根据上部用户属性的选择值不同，下面的显示内容也会根据选择值来变化，这里使用v-if来判断下面要做什么样的显示就不多再赘述。
但是由于这里可能会形成多个这样的小框，如下

所以这里要对数据进行循环操作来展示，所以form在绑定时不能简单使用一个对象来绑定了，而是使用了一个数组来不断往里添加或者删除来实现。简化数据结构：

arr: [
        {
        	id: '',
          	province: [],
          	brand: "", 
			.......
        },
],

我们使用v-for对arr循环操作，然后让form :model="arr[index]"即可，添加或者删除时只要往arr里push或者splice相同的对象就行。这本应该没什么，但是实现效果后却发生了意想不到的问题，这里我用上下来区分两部分，因为 下 的选择框里面会有多选的情况，当 下 在展示单选的时候选择，切换 上，（这里根据要求，上切换后，下的值对应清空，这是已经做了的） 然后下根据v-if判断显示到多选的选择框时，里面的值竟然还在显示，当我们点击这个选项时，它又离奇消失了。。。。如下

这里我先选择的是否vip，下 显示的是’是否’单选，当我切换到地域选项时，省份是多选的，里面的选择’是’竟然还在（这里我肯定的是已经清空了数据），当我点击省份选项后，那个’是’才会消失。
开始我找了各种办法，也一直以为的是没有清除相应数据导致的，但后来不断打印一直都肯定的是 下 的数据已经是空或者[]了，但是这个‘是’就是不消失。最后在同事的帮助下知晓了问题，这个select在 上 切换的时候实际已经根据v-if的判断切换到对应的选择框了，但是由于两者都使用的 el-select 而且当前这个是多选的状态，导致切换以后页面中没有’反应’过来，还以为咱们停留在上一个el-select，这里需要对每个多选的select添加一个key来让系统区分。下面是代码

<el-row>
	<el-col v-for="(item,index) in arr"
            	:key="index">
     		<el-form
                :model="arr[index]"
                :index="index"
                :item="arr[index]"
                :rules="rules"
                ref="condition"
              >
              <!-- 上 -->
              <el-row :gutter="32">
                  <el-col :xs="24" :sm="24" :md="24" :lg="24">
                    <el-form-item label="用户属性：" prop="ruleServer.serverId" class="firstCondition">
                      <el-select
                        :key="index"
                        v-model="arr[index].id"
                        placeholder="请选择"
                        clearable
                        @change="changeServerId(ruleConditionArray[index],index)"
                      >
                        <el-option
                          v-for="item in userAttributeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- 下 -->
                <el-row>
                  <el-col :xs="24"  :sm="24"  :md="24"  :lg="24" :key="index" v-if="arr[index].id==1"  >
                    <el-form-item label="省份：" prop="province">
                      <el-select
                        :key="'provinceAttribute'+index"
                        class="clearHt"
                        v-model="arr[index].province"
                        multiple
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in provinceList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" v-if="arr[index].id==2" :key="index">
                    <el-form-item label="请选择：" prop="isSelect">
                      <el-select
                        class="clearHt"
                        :disabled="groupType=='detail'"
                        v-model="ruleConditionArray[index].isSelect"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in isSelectList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  ................
                  <!-- 此处多个选择框根据 上也就是id来显示不同的el-select -->
                </el-row>
          </el-form>
	</el-col>
</el-row>

最后的解决办法就是在多选的el-select中也就是带multiple的select中添加上不同的key来区分，如:key="‘provinceAttribute’+index"，这样再次切换时就不会有上述问题发生了。

完结，撒花！