Vue for循环遍历多个select下拉框,解决选择某个el-option下拉框的内容,所有的el-select值全部都跟着改变

本文以el-select选择框为例,一二三级原因通过for循环遍历展示

一、该代码实现了以下功能:

1、一级原因每行只有一条,二级原因有多条,二级原因每一条对应的三级原因有多条。

2、当通过el-option展示的列表选中某一条二级原因时,请求三级原因列表。

3、选中一条二级原因后,el-option列表其他二级原因不可选,选择一条三级原因后,el-option列表其他三级原因不可选,二级原因列表其他项可进行选择,支持模糊搜索(通过filterable属性实现),支出多选(通过multiple属性实现)。

4、通过v-model绑定选中的el-select内容(allSelectSecondList[index]),做到一键清空。

二、可解决以下可能遇到的问题:

当el-select用for in data来循环成多个el-select时,随便选择某个el-option下拉框的内容,所有的el-select值全部都跟着改变。

 <!-- 一二三级原因 -->
 <div v-show="isShowReason" v-for="(item, index) in firstData" :key="index" style="margin-top: 5px;">
     <label style="padding-left: 2rem; font-weight: bold;">一级原因</label>
     <el-input v-model="item.codeValue" disabled size="small" class="inputFitst" style="width: 12%;"></el-input>
     <label style="padding-left: 2rem; font-weight: bold;">二级原因</label>
     <el-select v-model="allSelectSecondList[index]" multiple filterable size="small"
       :multiple-limit= secondMultipleLimit 
       value-key="codeKey" 
       @remove-tag="deleteSecondTag" 
       @change="selectSecond" 
       @focus="getSecondDataList(item.codeKey, index)" 
       style="width: 20%;">
       <el-option
         v-for="item in secondData"
         :key="item.codeKey"
         :label="item.codeValue"
         :value="item"
         :disabled="isDisable">
         </el-option>
     </el-select>
     <label style="padding-left: 2rem; font-weight: bold;">三级原因</label>
     <el-select v-model="allSelectThirdList[index]" multiple filterable size="small"
       :multiple-limit= thirdMultipleLimit 
       value-key="codeKey" 
       @remove-tag="deleteThirdTag" 
       @change="selectThird" 
       @focus="getThirdDataList(index)" 
       style="width: 47%;">
       <el-option
         v-for="item in nowThirdData"
         :key="item.codeKey"
         :label="item.codeValue"
         :value="item"></el-option>
     </el-select>
   </div>

用到以下属性:
firstData:[],//第一原因列表数据
secondData:[],//第二原因列表数据
thirdData:[],//第三原因列表数据
selectSecondList:[],//选中的第二原因列表数据
selectThirdList:[],//选中的第三原因列表数据
allSelectSecondList:[],//所有选中的第二原因列表数据,清空用到
allSelectThirdList:[],//所有选中的第三原因列表数据,清空用到
secondMultipleLimit: 1, //二级原因单选 只能选1个
thirdMultipleLimit: 0, //三级原因单选 不限制

你可能感兴趣的:(vue.js,前端,javascript)