V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Terry05
V2EX  ›  分享创造

v-selectpage 基于 Vue2 的高清重制版

  •  
  •   Terry05 ·
    TerryZ · 2018-07-02 09:18:49 +08:00 · 3034 次点击
    这是一个创建于 2336 天前的主题,其中的信息可能已经有所发展或是发生改变。

    v-selectpage

    基于 Vue2 强大的选择器, 可分页的列表或表格展现形式, 使用标签形式的多选模式, 国际化 i18n 和服务端数据源支持


    v-selectpage






    文档、实例

    请浏览

    jQuery 版本: SelectPage



    效果预览

    列表单选模式

    single

    使用标签的列表多选模式

    multiple

    简易表格视图

    table



    安装

    npm install v-selectpage --save
    

    Include plugin in your main.js file.

    import Vue from 'vue'
    import vSelectPage from 'v-selectpage';
    Vue.use(vSelectPage);
    

    使用

    template

    <template>
        <v-selectpage :data="list" key-field="id" show-field="name" class="form-control">
        </v-selectpage>
    </template>
    

    script

    export default {
        data(){
            return {
                list: [
                    {id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
                    {id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},
                    {...}
                ]
            }
        }
    };
    



    4 条回复    2018-07-02 11:43:36 +08:00
    hjdtl
        1
    hjdtl  
       2018-07-02 11:04:23 +08:00
    有 demo 体验一下吗
    ob
        2
    ob  
       2018-07-02 11:16:05 +08:00 via Android
    强烈支持,顺便问个问题。
    vue 页面,新增和编辑一条记录时,下拉框数据要怎么渲染?目前遇到编辑跟新增存在冲突,重复两次,好像不能销毁控件?
    求合理的实现方式。。
    Terry05
        3
    Terry05  
    OP
       2018-07-02 11:40:43 +08:00
    Terry05
        4
    Terry05  
    OP
       2018-07-02 11:43:36 +08:00
    @ob 项目里用的下拉列表,多数是来自字典,并且从缓存中读取的数据,做个简单的 Component,接收一个 typecode,那么 component 所做的事情就是去缓存里获取 typecode 对应的了列表,获取到后,用 v-for 渲染下拉列表
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2526 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 10:37 · PVG 18:37 · LAX 02:37 · JFK 05:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.