可排序表格 (Sortable & Searchable Tables) 在网页和表单设计中非常常用。用户可以通过点击表头对将表格以该列做顺序或降序排列,也可以利用 Search Box 对表格内容进行筛选。这个组件曾被运用于 X-Ray Diffraction Analysis App 和 Extract Graph Data App 等等。

注册组件


注册 Sortable & Searchable Tables 组件和之前介绍注册其他组件的方法类似, 其实就是复制粘贴已封装好的代码到父级实例中。

<script type="text/x-template" id="sortable-table-template">
...
</script> <script>
Vue.component('sortable_table', {
template: '#sortable-table-template’,

});
</script>

调用组件


直接添加自定义标签 <sortable_table></sortable_table> 调用组件。

<sortable_table class="row"
:rows="table_data"
:columns="table_header"
:filter-key="searchQuery"
:selected="selected_rows"
@update-table-data="onUpdateTableData"
@update-table-selected="onUpdateTableSelected">
</sortable_table>

传递数据


利用 v-bind 动态绑定数据,其中searhQuery 为 search box 的默认内容,table_header 为表格的表头,table_data 为表格的数据, select_rows 为勾选的行号。另外 "onUpdateTableData:function" 和 "onUpdateTableSelected" 用于动态刷新表格的内容。

 data: function(){
return {
searchQuery: '',
table_header: ['name', 'age', 'height', 'weight', 'color'],
table_data: [
{id: 1, name: 'Alice', age: 12, height: 155, weight: 45, color: '#ffffff'},
{id: 2, name: 'Ben', age: 13, height: 170, weight: 60, color: '#cccccc'},
{id: 3, name: 'Charlie', age: 17, height: 178, weight: 65, color: '#999999'},
{id: 4, name: 'Daniel', age: 14, height: 168, weight: 58, color: '#666666'},
{id: 5, name: 'Ethan', age: 11, height: 150, weight: 50, color: '#333333'},
],
selected_rows: [],
}
},
...
methods:{
onUpdateTableData:function(new_table_data) {
this.table_data = new_table_data;
},
onUpdateTableSelected:function(new_table_selected){
this.table_selected = new_table_selected;
},
},
源代码

Github

Vue.js 可排序列表 (Sortable & Searchable Tables) 组件的更多相关文章

  1. Vue.js 多选列表(Multi-Select)组件

    搬运公众号早前文章 多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素.这是一种常见的设计元素.有时候为了节省空间,我们会将选 ...

  2. Vue.js中用webpack合并打包多个组件并实现按需加载

    对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下.   前言 随着 ...

  3. Vue.js:轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

  4. 用vue.js写的一个瀑布流的组件

    用vue.js写的一个瀑布流的组件:https://segmentfault.com/a/1190000010741319 https://www.jianshu.com/p/db3cadc03402

  5. Vue.js 学习笔记之七:使用现有组件

    5.3 使用现有组件 在之前的五个实验中,我们所演示的基本都是如何构建自定义组件的方法,但在具体开发实践中,并非项目中所有的组件都是需要程序员们自己动手来创建的.毕竟在程序设计领域,"不要重 ...

  6. Vue.js:轻量高效的前端组件化方案(转载)

    摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...

  7. Vue.js学习使用心得(四)——组件

    一.组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界 ...

  8. 【转】Vue.js:轻量高效的前端组件化方案

    摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...

  9. Vue.js 源码分析(十三) 基础篇 组件 props属性详解

    父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...

随机推荐

  1. 前、中、后序遍历随意两种是否能确定一个二叉树?理由? && 栈和队列的特点和区别

    前序和后序不能确定二叉树理由:前序和后序在本质上都是将父节点与子结点进行分离,但并没有指明左子树和右子树的能力,因此得到这两个序列只能明确父子关系,而不能确定一个二叉树. 由二叉树的中序和前序遍历序列 ...

  2. 爬虫入门三 scrapy

    title: 爬虫入门三 scrapy date: 2020-03-14 14:49:00 categories: python tags: crawler scrapy框架入门 1 scrapy简介 ...

  3. C# LINQ (2)

    Limiting Data -- Take() and Skip() 前面讲了 筛选 和 排序,现在讲 选取皇帝选妃,层层选拔,最后留几个,让他过目,他选一个或者几个作为妃子,大概是这么个意思Take ...

  4. 地址解析协议ARP与逆地址解析协议RARP

    IP地址是用来通信的,但是和硬件地址是有区别的.物理地址是数据链路层和物理层使用的地址,IP地址是网络层及以上各层使用的地址. 发送数据时,数据从高层向下层传输,使用IP地址的IP数据报交给下层的数据 ...

  5. PyQt5笔记

    PyQt5 窗口类继承QMainWindow. 1.消息盒子QMessageBox 弹出一个窗口,根据选择的不同执行不同的操作.比如点击关闭后,实用消息盒子确认是否关闭. # 关闭QWidget将产生 ...

  6. sqli-libs(4) 双引号报错

    经测试,发现单引号不报错,而双引号却报错了 通过查看源码,发现下图中红色的箭头,如果不知道是什么意思,我们可以复制出来看看是什么含义: <?php$id=1;$id='"' .$id. ...

  7. Ubuntu 18.04 + pip3 install virtualenvwrapper 报错 ERROR: virtualenvwrapper could not find virtualenv in your path

    接上片... 问题 virtualenvwrapper装好后, 发现使用mkvirtualenv XX时, 又找不到virtualenv了... apt install python3-virtual ...

  8. Google reCAPTCHA 2 : Protect your site from spam and abuse & Google reCAPTCHA 2官方教程

    1

  9. JavaScript var, let, const difference All In One

    JavaScript var, let, const difference All In One js var, let, const 区别 All In One 是否存在 hoisting var ...

  10. TypeScript——02——TS基本数据类型介绍和使用

    一,TS的数据类型 ES6的数据类型: 6种基本数据类型 Boolean Number String Symbol undefined null 3种引用类型 Array Function Objec ...