v-selectpage 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
v-selectpage 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
v-selectpage 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
v-selectpage 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
v-selectpage 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 TerryZ
适用人群 未知
收录时间 2018-07-02

软件简介

v-selectpage

简洁而强大的下拉分页选择器

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

文档、实例

请浏览

jQuery 版本: SelectPage

功能特点

  • 分页展示数据

  • i18n 支持, 提供了 中文、英文、日文 等语言

  • 服务端数据源支持

  • 使用标签模式进行项目多选

  • 可使用键盘进行快速导航

  • 提供快速搜索,进行快速数据定位

  • 提供列表视图和表格视图进行展示数据

  • 可自定义行显示方式

插件预览

列表视图单选模式

single

列表视图使用标签的多选模式

multiple

表格视图

table

插件安装

npm install v-selectpage --save

在项目入口 main.js 中引入

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:'克里夫兰骑士'},
                {...}
            ]
        }
    }
};
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
发表于大前端专区
2019/07/05 10:10

v-selectpage v2.1.2,带分页功能的列表/表格视图选择器

基于 Vue2 的 v-selectpage v2.1.2 版本发布,更新内容: 使用 render 方式完全重构插件 样式简洁化,减少线条的使用 优化部分操作和数据处理性能 修复部分情况下数据请求重复触发问题 修复部分情况下,输入查询无效的问题 增加 rtl 内容右对齐模式下,查询输入框的输入方向修改为从右向左展示模式 增加西班牙语,语言关键字 es 增加德语,语言关键字 de 增加罗马尼亚语,语言关键字 ro 增加法语,语言关键字 fr 插件简介: v-...

2
35
发表于大前端专区
2019/01/04 10:43

v-selectpage v2.0.2,增加阿拉伯语及 RTL 显示模式支持

基于 Vue2 的 v-selectpage v2.0.2 版本发布,更新内容: 重构插件 修改 iconfont 字体名称,以免与实际项目中的字体名称冲突 修复部分情况下全选当前页功能无效的问题 修复服务端数据模式可能存在多次加载数据问题,并在选择项目后,出现新选择的项目与原选择项目交替闪烁的情况 增加 rtl 参数允许内容和下拉层向右对齐,以适配部分国家和语言的向右排版的需求 增加 disabled 参数设置插件禁用状态,同时去除 disabled 的 api ...

1
4
发表于大前端专区
2018/07/12 09:40

隆重推出基于 Vue2 的 v-selectpage,增加表格模式

基于 Vue2 的 v-selectpage v1.0.15 版本发布,更新内容: 修复下拉菜单超出屏幕后的处理 使用 v-model 属性取代 selected 参数, 作为插件初始化,以及数据值返回的对象 修复消息窗口图标错位 修复部分情况下无边框的情况 修复部分浏览器在弹出列表后,页面会滚动到顶部 插件简介: v-selectpage 基于 Vue2 强大的选择器, 可分页的列表或表格展现形式, 使用标签形式的多选模式, 国际化 i18n 和服务端数据源支持 文档、DEMO 请访...

8
13
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于大前端专区
2018/07/27 18:31

简洁而强大的下拉分页选择器 v-selectpage

v-selectpage 简洁而强大的下拉分页选择器 基于 Vue2 强大的选择器, 可分页的列表或表格展现形式, 使用标签形式的多选模式, 国际化 i18n 和服务端数据源支持 文档、实例 请浏览 English site 国内站点 jQuery 版本: SelectPage Demo:https://terryz.gitee.io/selectpage/demo.html 功能特点 分页展示数据 i18n 支持, 提供了 中文、英文、日文 等语言 服务端数据源支持 使用标签模式进行项目多选 可使用键盘进行快速导航 提供快速...

0
0
发表了博客
2019/09/05 09:28

v-if和v-show的用法

相同点   v-if 和 v-show 都可以动态控制 dom 元素显示隐藏; 不同点   v-if 显示隐藏是将 dom 元素整个添加或删除(频繁操作dom对性能影响很大);   v-show 隐藏是为该元素添加 display:none,dom 元素还存在; 性能消耗   v-if 有更高的切换消耗;   v-show 有更高的初始渲染消耗; 使用场景   当组件中某块内容只会显示或隐藏不会再次改变显示状态,此时用 v-if 更加合适,例如请求后台接口通过后台数据控制某...

0
0
发表了博客
2019/09/12 10:40

v-for和v-if的问题

当v-for和v-if在同一个元素标签上时,v-for优先级高于v-if,也就是说在v-for的每次循环运行中都会调用v-if的判断,所以会出现问题,vue官网推荐将v-if移到父元素。 例子: testData: { name: 'TESTOBJECT', id: 10, data: [1.67, 1.33, 0.98, 2.21] } <ul> <li v-for="value in testData"> <div id="test" v-if="Array.isArray(value)" v-for="item in value">{{item}}</div> <div ...

0
0
发表了博客
2020/05/09 08:49

v-if与v-show的区别

场景:   1、使用element-ui中el-upload组件作图片上传   2、上传成功后来回切换tab   3、tab是否显示使用的是v-if   (粗略图) 问题:   1、上传成功后,图片显示,切换tab之后图片不显示   2、来回切换,图片的地址是一致的 问题分析:   1、图片是否显示与图片路径有关   2、console.log()以及查看元素,图片地址一致,排除切换前后路径不一致导致图片显示问题   3、v-if的原理:v-if是通过控制dom节点的...

0
0
发表了博客
2020/05/09 11:01

v-if与v-show的区别

场景:   1、使用element-ui中el-upload组件作图片上传   2、上传成功后来回切换tab   3、tab是否显示使用的是v-if   (粗略图) 问题:   1、上传成功后,图片显示,切换tab之后图片不显示   2、来回切换,图片的地址是一致的 问题分析:   1、图片是否显示与图片路径有关   2、console.log()以及查看元素,图片地址一致,排除切换前后路径不一致导致图片显示问题   3、v-if的原理:v-if是通过控制dom节点的...

0
0
发表于大前端专区
2018/10/01 23:34

v-show与v-if的区别

在自学vue.js这个比较简单的前端框架的一些指的过程中,我通过查找相关资料发现了v-show与v-if的一些区别。 v-show与v-if除了以下两点区别以外,用法基本相同: 1. v-show的隐藏是生成HTML标签,但通过CSS的display:none;隐藏起来;v-if是直接不生成HTML标签 2. v-show适合频繁切换。v-if切换有一个局部编译/卸载的过程,切换过程中不断地销毁和重建内部的事件监听和子组件,切换消耗高;而v-show只是简单的基于CSS切换,所以v...

0
0
2019/11/03 21:09

Vue的Key属性,v-for和v-if,v-if/v-show,v-pre不渲染,v-once只渲染一次

key属性 为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用Key,它会基于Key的变化重新排列元素顺序,并且会移除Key不存在的元素。 v-for为什么要加Key ``` 添加 {{item.name}} ``` 有key ``` 添加 {{item.name}} ``` ![file](https://oscimg.oschina.net/oscnet/fea38c0e68380e8f778e73aea01c585dbc...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
51 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部