下拉多选框、带搜索、带条件互斥逻辑判断组件
如图效果，多选下拉框，可搜索下拉内容进行选择，一组选择后，其他组再选，之前的选项置灰（也就是说，每个选项只能被选一次。）
上代码：
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() {} }
样式：