先说问题。
我们在项目中时常会写一些选项之间相互联系的内容,如下
根据上部用户属性的选择值不同,下面的显示内容也会根据选择值来变化,这里使用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",这样再次切换时就不会有上述问题发生了。
完结,撒花!