美文网首页Vue.js专区前端Vue专辑VueJS
Vue+elementUI 实现远程下拉框+搜索+TAG展现+编

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

作者: 黄永超 | 来源:发表于2018-11-29 10:10 被阅读41次

    效果如下
    下拉选中之后可以配置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 基本的语法 计算属性 监听 以及相关钩子函数实现 ,天然简单无侵入
    有需要的给我留言 我可以分享代码

    相关文章

      网友评论

        本文标题:Vue+elementUI 实现远程下拉框+搜索+TAG展现+编

        本文链接:https://www.haomeiwen.com/subject/radxcqtx.html