可排序表格 (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. 恢复win10 LTSC 2019 图片查看器功能

    1.开始–运行–输入"regedit"打开注册表. 2. 在打开的注册表编辑器中,从左侧依次展开:HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Win ...

  2. 10.PowerShell DSC之细节

    mof文件到各Node放在哪里了? 在C:\Windows\System32\Configurtion文件夹下: 你可能会注意到mof的文件名称和Pull Server上的不一致,并且多出了几个.不用 ...

  3. WPF Animation For SizeChanged Of UIElement

    效果图 学到一个新词: Show me the money 背景 这几天查资料,看到 CodeProject 上面的一篇 Post <Advanced Custom TreeView Layou ...

  4. 流媒体传输协议之 RTP (上篇)

    本系列文章将整理各个流媒体传输协议,包括 RTP/RTCP,RTMP,希望通过深入梳理协议的设计细节,能够给流媒体领域的开发者带来一定的启发. 作者:逸殊 审核:泰一 介绍 RTP,即 real-ti ...

  5. 使用 Typecho 搭建博客

    nginx 配置文件 [root@dbtest ~]# cat /etc/nginx/conf.d/www.typecho.com.conf server { listen 80; server_na ...

  6. Java之浅拷贝和深拷贝

    [概述] Java中的对象拷贝 ( Object Copy ) 是指将一个对象的所有属性(成员变量)拷贝到另一个有着相同类类型的对象中去.例如,对象 A 和对象 B 都属于类 S,具有属性 a 和 b ...

  7. 数据分析常用库(numpy,pandas,matplotlib,scipy)

    概述 numpy numpy(numeric python)是 python 的一个开源数值计算库,主要用于数组和矩阵计算.底层是 C 语言,运行效率远高于纯 python 代码.numpy主要包含2 ...

  8. Linux 驱动框架---input子系统框架

    前面从具体(Linux 驱动框架---input子系统)的工作过程学习了Linux的input子系统相关的架构知识,但是前面的学习比较实际缺少总结,所以今天就来总结一下输入子系统的架构分层,站到远处来 ...

  9. ORM框架对分表分库之分库和分表指定不同的字段

    ORM框架分库分表已实现了 只分表(根据指定字段) 点我查看demo 只分库(根据指定字段) 点我查看demo 既分库又分表(根据相同的字段) 点我查看demo 上面几点之前我在博客中已经写了使用介绍 ...

  10. Jamstack Conf 2020

    Jamstack Conf 2020 Jamstack Conf Virtual https://jamstackconf.com/virtual/ Conf Schedule https://jam ...