Vue+elementUI 实现远程下拉框+搜索+TAG展现+编
2018-11-29 本文已影响41人
黄永超
效果如下
下拉选中之后可以配置Tag形式展现

支持远程搜索

支持分页

支持编辑回显正确的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 基本的语法 计算属性 监听 以及相关钩子函数实现 ,天然简单无侵入
有需要的给我留言 我可以分享代码