Vue+elementUI 实现远程下拉框+搜索+TAG展现+编辑回显

效果如下
下拉选中之后可以配置Tag形式展现


tag.png

支持远程搜索


搜索.png

支持分页


分页.png

支持编辑回显正确的value 以及label

使用方法配置如下
<remote-select
label-key="cname"
v-model.number="form.cid"
:initv="form.cid"
@change="changeaname2"
showtag="true"
tagtype="success"
:initlabel="form.cname" url="xxxx/loadPage"
placeholder="Campaigns">
</remote-select>

initv initlabe 回显值绑定
label-key 绑定label取自查询结果的哪个key一般为name
label-value 绑定下拉框value绑定查询结果的某个key 默认id
showtag 选中后是否tag形式展现
tagtype elementui 支持的类型 info success等
url 远程下拉查询的 url 可支持分页
哈哈 代码不太美观,但是解决了企业级远程搜索下拉框的需求
完全基于vue elementui 基本的语法 计算属性 监听 以及相关钩子函数实现 ,天然简单无侵入
有需要的给我留言 我可以分享代码

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,828评论 19 139
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,053评论 3 119
  • 分步启动命令 stf_start.sh 设备节点 Docker启动STF命令 服务端 设备端 firefox浏览器...
    PreFU阅读 10,702评论 4 3
  • 今天听到一个1024的广播主题是别让冷战冷了心,才发现我就是那个爱冷战的人,不知道那个被我冷战的人在收不到回应的时...
    南晓薰阅读 1,661评论 0 0
  • 总结: 上午看看书,看到了高效能人士的七个习惯的第二章,关于七个习惯的概述,习惯定义为知识、技巧和意愿的相互交织的...
    樱花树下_e526阅读 1,414评论 0 0

友情链接更多精彩内容