select下拉框组件禁用选项值怎么实现

效果如图

背景需求

下拉框的数据选项值是通过接口请求过来的，当时没有想明白将disabled为true写在哪里 接口直接将数据渲染出来了，就是在后面继续再做判断；这个与当时的时间判断出数据是大同小异；因此不用将问题复杂化，这样做还少写了@change这个切换值的方法了。

源代码

代码语言：javascript复制

 <!-- //指定部门主管的多选框 -->
 <template v-if="orderConfig.reportAuditType == 3">
     <el-select
       v-model="orderConfig.reportDesignatedDept"
       clearable
       :placeholder="$t('commons.selectPlease')"
       :key="'reportDesignatedDept'"
       @change="showTip"
     >
       <el-option
         v-for="item in deptList"
         :key="item.deptId"
         :label="item.deptName"
         :value="item.deptId"
         :disabled="item.disabled"
       >
       </el-option>
     </el-select>
   </template>

代码语言：javascript复制

//这个是请求下拉框的数据的请求方法
getEmployeeList(projectId) {
      return getOwnProject(projectId).then((res) => {
        getEmployeeList({ companyId: res.companyId }).then((response) => {
          this.empList = response;
        });
        //这个是请求下拉框的数据的请求方法
        selectDeptByCompanyId({ companyId: res.companyId }).then((response) => {
        //这里是所有的下拉框选项数据
          this.deptList = response;
          //遍历 this.deptList 负责人为空deptHeadId == null 即禁用
          for (let i = 0, length = this.deptList.length; i < length; i  ) {
               if (this.deptList[i].deptHeadId == null) {
                this.deptList[i].disabled=true;
               }
          }
        });
      });
    },

数据 渲染 select 遍历 接口

0 人点赞