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

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


Vue+elementUI 实现远程下拉框+搜索+TAG展现+编辑回显_第1张图片
tag.png

支持远程搜索


Vue+elementUI 实现远程下拉框+搜索+TAG展现+编辑回显_第2张图片
搜索.png

支持分页


Vue+elementUI 实现远程下拉框+搜索+TAG展现+编辑回显_第3张图片
分页.png

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

使用方法配置如下
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">

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

你可能感兴趣的:(Vue+elementUI 实现远程下拉框+搜索+TAG展现+编辑回显)