vue2 el-select下拉选择框 点击其他位置或者弹窗关闭下拉框/点击取消时，下拉框变成之前的值

1.elSelect点击空白处无法收起下拉框（失去焦点并隐藏）

// 定义指令
directives: {clickOutside: {bind: function (el, binding, vnode) {el.clickOutsideEvent = function (event) { // here I check that click was outside the el and his childrensif (!(el === event.target || el.contains(event.target))) { // and if it did, call method provided in attribute valuevnode.context[binding.expression](event)}}document.body.addEventListener('click', el.clickOutsideEvent)},unbind: function (el) {document.body.removeEventListener('click', el.clickOutsideEvent)}}
},

使用方法

ref="select"

v-clickOutside="clickOutSide"

 methods里加个 clickOutSide

clickOutSide () {this.$refs.select.blur()   关闭},

2.点击取消时，下拉框的值变成之前的值

<el-select v-model="form.projectId" placeholder="请搜索并选择项目" style="width: 95%" clearablefilterable ref="select"@change="projectChange"> <el-option v-for="item in projectOptions" :key="item.id":label="item.projectName" :value="item.id"></el-option> 
</el-select> watch: {'form.projectId': function(projectId,oldVal) {if(projectId) {this.step = 1// 初始化调用附件信息if(this.form.projectId != '1' && this.form.projectId != ''){this.getProjectFileList(this.form.projectId)}}this.olval = oldVal;console.log(projectId,oldVal)},immediate: true,
},methods:{projectChange(data) {this.$confirm('请再三确认，该合同绑定的项目是否正确，发起审批后所选项目将无法修改！', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {// 自己的逻辑this.$refs.select.blur()} else {// 自己的逻辑this.$refs.select.blur()}}).catch(() => {//将监听到的旧值赋给点击的值this.form.projectId = this.olval;this.$message({type: 'info',message: '已取消'});          this.$refs.select.blur()});},
}

elSelect点击空白处无法收起下拉框（失去焦点并隐藏） - 好运的菜狗 - 博客园

el-select切换选项时提示是否继续，点击取消值不变，确定值改变_el-select选中前触发动作 确定后才改变-CSDN博客