效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2开发：el-select多选框点击后关闭下拉</title>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
padding: 50px;
}
</style>
</head>
<body>
<div id="app">
<div style="margin-bottom: 200px;">
<span>el-select多选框点击后不关闭下拉</span>
<el-select v-model="inviteStoreStatus1" pool="patient" multiple>
<el-option v-for="item in inviteStoreStatusList" :key="item.code" :label="item.name" :value="item.code" />
</el-select>
</div>
<div>
<span>el-select多选框点击后关闭下拉</span>
<el-select v-model="inviteStoreStatus" pool="patient" multiple ref="multiSelect" @change="chooseCustom">
<el-option v-for="item in inviteStoreStatusList" :key="item.code" :label="item.name" :value="item.code" />
</el-select>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
inviteStoreStatus: null,
inviteStoreStatus1: null,
inviteStoreStatusList: [
{
code: '0',
name: '亲亲'
},
{
code: '1',
name: '抱抱'
},
{
code: '2',
name: '举高高'
},
]
}
},
created() {
},
methods: {
// select多选框点击后关闭下拉
chooseCustom() {
//调用element-ui select组件blur方法
//要包再timeout里面，直接调用不会关闭下拉框option
setTimeout(() => {
this.$refs.multiSelect.blur()
}, 50)
}
}
})
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。