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