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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐