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博客
測試)
