下拉多选框、带搜索、带条件互斥逻辑判断组件

如图效果，多选下拉框，可搜索下拉内容进行选择，一组选择后，其他组再选，之前的选项置灰（也就是说，每个选项只能被选一次。）

上代码：

html：

 <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      append-to-body
      width="540px"
      ref="ruleForm"
      @open="handleOpen"
      @close="hanldClose"
    >
      <el-form ref="ruleForm">
        <el-form-item label="日期" prop="materialWarehouseId">
          <el-input v-model="ruleForm.dutyDateStr" disabled></el-input>
        </el-form-item>
        <el-form-item label="带班领导" prop="shiftLeaderUseridsList">
          <el-select
            placeholder="请选择带班领导"
            v-model="ruleForm.shiftLeaderUseridsList"
            collapse-tags
            :remote="false"
            :multiple="!single"
            :filterable="single"
            clearable
            @clear="clearHandle"
            @visible-change="blurHandle('带班领导')"
          >
            <div class="inputBox" v-if="!single">
              <el-input
                v-model="filterQuery"
                @input="filterMethodThrottle($event)"
              ></el-input>
            </div>
            <template v-for="item in orgPersonList">
              <el-option
                :key="item.id"
                :label="item.realName + '  ' + item.telPhone"
                :value="item.id"
                :disabled="item.disabled"
                v-show="item.isShow"
              >
              </el-option>
            </template>
          </el-select>
        </el-form-item>

        <el-form-item label="值班科长" prop="dutySectionChiefUseridsList">
          <el-select
            placeholder="请选择值班科长"
            v-model="ruleForm.dutySectionChiefUseridsList"
            collapse-tags
            :remote="false"
            :multiple="!single"
            :filterable="single"
            clearable
            @clear="clearHandle"
            @visible-change="blurHandle('值班科长')"
          >
            <div class="inputBox" v-if="!single">
              <el-input
                v-model="filterQuery"
                @input="filterMethodThrottle($event)"
              ></el-input>
            </div>
            <template v-for="item in orgPersonList">
              <el-option
                :key="item.id"
                :label="item.realName + '  ' + item.telPhone"
                :value="item.id"
                :disabled="item.disabled"
                v-show="item.isShow"
              >
              </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="值班人员" prop="personnelOnDutyUseridsList">
          <el-select
            placeholder="请选择值班人员"
            v-model="ruleForm.personnelOnDutyUseridsList"
            collapse-tags
            :remote="false"
            :multiple="!single"
            :filterable="single"
            clearable
            @clear="clearHandle"
            @visible-change="blurHandle('值班人员')"
          >
            <div class="inputBox" v-if="!single">
              <el-input
                v-model="filterQuery"
                @input="filterMethodThrottle($event)"
              ></el-input>
            </div>
            <template v-for="item in orgPersonList">
              <el-option
                :key="item.id"
                :label="item.realName + '  ' + item.telPhone"
                :value="item.id"
                :disabled="item.disabled"
                v-show="item.isShow"
              >
              </el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取消</el-button>
        <el-button @click="submitFn" size="small" type="info">确认</el-button>
      </span>
    </el-dialog>

js：

props: {

    itemId: {

      require: true,

      type: Number

    },

    kindId: {

      require: true,

      type: String

    }

  },

data() {
    return {
      dialogVisible: false,
      ruleForm: {
        dutyDateStr: null, //日期
        shiftLeaderUseridsList: [], //带班领导
        dutySectionChiefUseridsList: [], //值班科长
        personnelOnDutyUseridsList: [] //值班人员
      },
      single: false,
      filterQuery: '',
      orgPersonList: [] //机构联系人
    };
  },
  methods: {
    // 获取机构联系人表列表
    getorgPersonFn() {
      let data = {
        orgId: this.kindId
      };
      getOrgPersonApi(data).then(res => {
        if (res.data.code === 200) {
          this.orgPersonList = res.data.data;
          this.getDetailFn();
        }
      });
    },

    //下拉关闭
    blurHandle(status) {
      this.filterQuery = '';
      if (status == '带班领导') {
        this.orgPersonList.forEach(val => {
          this.$set(val, 'disabled', false);
          this.$set(val, 'isShow', true);
          this.ruleForm.dutySectionChiefUseridsList.forEach(v => {
            if (val.id == v) {
              this.$set(val, 'disabled', true);
            }
          });
          this.ruleForm.personnelOnDutyUseridsList.forEach(v => {
            if (val.id == v) {
              this.$set(val, 'disabled', true);
            }
          });
        });
      } else if (status == '值班科长') {
        this.orgPersonList.forEach(val => {
          this.$set(val, 'disabled', false);
          this.$set(val, 'isShow', true);
          this.ruleForm.shiftLeaderUseridsList.forEach(v => {
            if (val.id == v) {
              this.$set(val, 'disabled', true);
            }
          });
          this.ruleForm.personnelOnDutyUseridsList.forEach(v => {
            if (val.id == v) {
              this.$set(val, 'disabled', true);
            }
          });
        });
      } else if (status == '值班人员') {
        this.orgPersonList.forEach(val => {
          this.$set(val, 'disabled', false); //这里使用$set方法 解决无法更新数据问题
          this.$set(val, 'isShow', true);
          this.ruleForm.dutySectionChiefUseridsList.forEach(v => {
            if (val.id == v) {
              this.$set(val, 'disabled', true);
            }
          });
          this.ruleForm.shiftLeaderUseridsList.forEach(v => {
            if (val.id == v) {
              this.$set(val, 'disabled', true);
            }
          });
        });
      }
    },

    //获取详情
    getDetailFn() {
      getDetailApi(this.itemId).then(res => {
        if (res.data.code == 200) {
          this.ruleForm.dutyDateStr = res.data.data.dutyDateStr;
          this.ruleForm.dutySectionChiefUseridsList = res.data.data
            .dutySectionChiefUseridList
            ? res.data.data.dutySectionChiefUseridList
            : [];
          this.ruleForm.shiftLeaderUseridsList = res.data.data
            .shiftLeaderUseridList
            ? res.data.data.shiftLeaderUseridList
            : [];
          this.ruleForm.personnelOnDutyUseridsList = res.data.data
            .personnelOnDutyUseridList
            ? res.data.data.personnelOnDutyUseridList
            : [];
          this.orgPersonList.forEach(val => {
            this.$set(val, 'disabled', false);
            this.$set(val, 'isShow', true);
            this.ruleForm.dutySectionChiefUseridsList.forEach(v => {
              if (val.id == v) {
                this.$set(val, 'disabled', true);
              }
            });
            this.ruleForm.shiftLeaderUseridsList.forEach(v => {
              if (val.id == v) {
                this.$set(val, 'disabled', true);
              }
            });
            this.ruleForm.personnelOnDutyUseridsList.forEach(v => {
              if (val.id == v) {
                this.$set(val, 'disabled', true);
              }
            });
          });
        }
      });
    },
    // 提交
    submitFn() {
      let data = {
        id: this.itemId,
        dutySectionChiefUseridsList: this.ruleForm.dutySectionChiefUseridsList,
        shiftLeaderUseridsList: this.ruleForm.shiftLeaderUseridsList,
        personnelOnDutyUseridsList: this.ruleForm.personnelOnDutyUseridsList
      };
      console.log(data, 'daraaaaaaaa');
      editApi(data).then(res => {
        if (res.data.code === 200) {
          if (res.data.data) {
            this.dialogVisible = false;
            this.$emit('refresh');
            this.$message({
              type: 'success',
              message: '编辑成功'
            });
          } else {
            this.$message({
              message: '请勿重复添加！',
              type: 'warning'
            });
          }
        }
      });
    },
    //下拉的搜索
    filterMethodThrottle(word) {
      this.orgPersonList.forEach(val => {
        if (word == '') {
          val.isShow = true;
        } else {
          val.isShow = false;
          if (val.realName.indexOf(word) != -1) {
            val.isShow = true;
          }
        }
      });
    },
    //清除选中的项
    clearHandle(item) {
      console.log(item, '清除的');
    },
    //打开弹窗
    handleOpen() {
      this.getorgPersonFn();
    },
    //关闭弹窗
    hanldClose() {}
  }

样式：

<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.form-tips-color {
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f57171;
  position: absolute;
  top: 129%;
  left: 0;
}
.form-tips {
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #a4a5d3;
  padding-left: 100px;
  box-sizing: border-box;
}

/deep/ .el-input.is-disabled .el-input__inner {
  color: #a4a5d3;
}
/deep/ .el-dialog {
  .el-form-item__label {
    width: 100px;
  }
}
.inputBox {
  /deep/ .el-input__inner {
    width: calc(100% - 40px);
    margin: 0 20px 10px;
    padding-right: 30px;
    box-sizing: border-box;
    background: #3c3e74 !important;
    border: 1px solid #31337c;
    border-radius: 6px;
    color: #fff;
  }
}
</style>