el-select选择组件中@change事件返回对象方法

程序媛夏天

发布于 2024-01-18 20:49:26

52200

代码可运行

文章被收录于专栏：夏天的前端笔记夏天的前端笔记

运行总次数：0

代码可运行

背景需求：

选中多选框的部门后，还要去查询到该部门是否有负责人，有负责人就能够保存；无负责人，就提示“该部门暂未设置负责人”。

解决思路：

  <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>

//@change="showTip"，是组件自带的方法，不需要带参数；showTip(参数)，是获取系统传回的数据，所以需要带参数
//指定部门主管-选择选中框
  showTip(data){
    let deptHeadId;
    for(let i = 0 ,length = this.deptList.length;i<length;i++){
      if(this.deptList[i].deptId == data){
        deptHeadId = this.deptList[i].deptHeadId
         //假如里面为空，那么就禁用
        if(this.deptHeadId===null){
          this.disabled=true,
          this.$message({
            message:
              this.$t("config.deviceTip"),
            type: "info",
          });
        }
      }
    } 
  },