vue2-element-dict、vue3-element-dict、vue2-vant-dict、vue3-vant3-dict字典包，vue2-water-marker、vue3-water-marker防篡改的水印插件包，vue-axios-optimize请求优化包，大家有兴趣的可在npm官网搜索了解下，有疑问可咨询小布。
http://www.xiaobusoft.com 爆米花小布官方域名，有兴趣的可查阅。
前言
大家好，我是沈小布，勤能补拙，实践是检验真理的唯一标准是我的座右铭，帮助同行人员少走弯路，提高开发效率，提升代码质量是我的初心。
主题
今天的主题是el-select配置远程搜索时，实现可选择选项内容也可以输入自定义内容。
效果展示
展示效果如图所示
即可选择选项内的内容，对于自定义内容也可显示在表格内。
且展示效果中滚动页面时会自动关闭弹出来的选项框，能够解决滚动时选项框未关闭导致的各种样式问题。如有兴趣可查阅页面滚动时隐藏弹出的选项框(vue+element)
上代码
话不多说，直接上代码
<template><div class="xiaobu-container" v-closeSelect="'window'"><el-formref="queryForm":model="queryParams":inline="true"class="search-form clearfix"><el-form-itemclass="search-field fl five-per-row"label="名称"prop="roleName"><el-selectv-model="queryParams.name"filterableremoteplaceholder="请输入关键词"="remoteMethod('')"="handlleChange"-change="handleVisibleChange":remote-method="remoteMethod":loading="loading"><el-optionv-for="item in options":key="item.roleId":label="item.roleName":value="item.roleName"></el-option></el-select></el-form-item><el-form-item class="fr"><el-button type="primary" ="handleQuery">查 询</el-button></el-form-item></el-form></div></template><script>import { roleApi } from "@/api"export default {data() {return {queryParams: {name: ""},options: [], // 下拉选项数据loading: false,selectPathName: "", // 选中的数据selectKey: "" // 搜索关键字}},methods: {handlleChange(val) {this.selectPathName = val},handleVisibleChange(val) {// 关闭选项卡时if (!val) {// 判断 name有没有变，有变说明有选择 没变说明没选择 没变 且 有搜索关键字时 设置关键字为搜索条件setTimeout(() => {if ((!this.queryParams.name || this.queryParams.name === this.selectPathName) && this.selectKey) {// 设置后得把 选中值改为 selectKeythis.selectPathName = this.selectKeythis.$set(this.queryParams, "name", this.selectKey)}}, 0)}},remoteMethod(query) {// 记录搜索关键字this.selectKey = querythis.loading = trueconst params = {roleName: query,pageNum: 1,pageSize: 50}roleApi.getList(params).then(res => {this.options = res.rowsthis.loading = false}).catch(err => {this.options = []this.loading = false})},handleQuery() {setTimeout(() => {alert("搜索名称为：" + this.queryParams.name)}, 0)}}}</script>
v-closeSelect="'window'" 就是实现滚动时关闭弹出选项框的关键代码。v-closeSelect自定义指令，可下载vue2-element-admin-plugin插件包进行使用。也欢迎大家尝试体验后台管理系统简易框架，后续代码即将开源，请持续关注。https://www.xiaobusoft.com/vue2-element-admin
总结
这就是el-select配置远程搜索时，实现可选择选项内容也可以输入自定义内容。！希望对您有所帮助，感谢支持。
写在最后
希望我的文章能够或多或少帮助到大家，如果有点帮助，可分享给更多人，予人玫瑰，手有余香。最后可以的话三连击是对小编写文最大的动力。
公众号：爆米花小布专注分享web前端相关技术文章、工具包、软件工具等，如果喜欢我的分享，给 小布 点一个赞👍 或者 ➕关注都是对我最大的支持。
