本文以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, //二级原因单选
thirdMultipleLimit: 0, //三级原因单选