vue.js表格组件开发的实例详解


Posted in Javascript onOctober 12, 2016

前言

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

组件开发的基础

组件可以扩展 HTML 元素,封装可重用的代码。我理解为功能模块的模板吧。

对于vue来说,组件是这个样子的,我们在html里面写

<div id="example"> 
 <my-component></my-component>
</div>edx

然后就出来

<div id="example"> 
<div>A custom component!</div>
</div>

代码 <div>A custom component!</div>我们只要写一遍就行了 。

所以我们需要定义它,把 my-component的标签和代码关联起来,所以我们要定义它

// 定义
var MyComponent = Vue.extend({
 template: '<div>A custom component!</div>'
})

定义了之后,我们要让页面能够渲染它,让Vue知道它的存在

// 注册
 Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
 el: '#example'
})

以上,是官网一个非常简单的例子 ,其实觉得和一个function的封装也差不多,定义,引入,然后执行。

然后一个组件可以引用别的组件的东西,有点像函数的互相调用啊。

var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
 template: '...',
 components: {
 // <my-component> 只能用在父组件模板内
 'my-component': Child
 }
})

一个表格组件的实例

这是官网的例子

vue.js表格组件开发的实例详解

这个是一个可以排序的表格的例子。我们从头开始来制作一个可以排序的表格。

基本结构

首先分成两个部分,一个是搜索框,一个是表格本身,我们可以得到这样的结构

<div id="demo">
 <form id="search">
 Search <input name="query">
 </form>
<table>
 <thead>
 <tr>
 <th>name</th>
 <th>power</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Jack Chan</td>
 <td>7000</td>
 </tr>
 </tbody>
</table>
</div>

显示效果

vue.js表格组件开发的实例详解

加上基本的css

body {
 font-family: Helvetica Neue, Arial, sans-serif;
 font-size: 14px;
 color: #444;
}

table {
 border: 2px solid #42b983;
 border-radius: 3px;
 background-color: #fff;
}

th {
 background-color: #42b983;
 color: rgba(255,255,255,0.66);
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -user-select: none;
}

td {
 background-color: #f9f9f9;
}

th, td {
 min-width: 120px;
 padding: 10px 20px;
}

#search {
 margin-bottom: 10px;
}

显示效果如下,

vue.js表格组件开发的实例详解

提取组件

我们是想要让表格成为单独的组件,所以我们定义一个叫做 demo-grid的组件,用它来生成表格

<div id="demo">
 <form id="search">
 Search <input name="query" >
 </form>
 <demo-grid>
 </demo-grid>
</div>

代码里面关于表格的那部分给放到组件模板里面,我们定义组件。也就是用script来定义,

<script type="text/x-template" id="grid-template">
 <table>
 <thead>
 <tr>
  <th>name</th>
  <th>power</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>Jack Chan</td>
  <td>7000</td>
 </tr>
 </tbody>
 </table>
</script>

定义完了之后我们要在给Vue注册组件模块,然后进行Vue的渲染

Vue.component('demo-grid',{
 template:"#grid-template",
 });

 var demo = new Vue({
 el:'#demo'
 })

然后最后的效果是一样的,这个时候并没有数据流。

组件数据流

我们要让表格知道表格的头部和表格的内容,也就是有一个gridColumns和gridData,这个数据最开始放在Vue的Data里面

// bootstrap the demo
 var demo = new Vue({
 el: '#demo',
 data: {
  gridColumns: ['name', 'power'],
  gridData: [
  { name: 'Chuck Norris', power: Infinity },
  { name: 'Bruce Lee', power: 9000 },
  { name: 'Jackie Chan', power: 7000 },
  { name: 'Jet Li', power: 8000 }
  ]
 }
 })

然后我们的组件也要接受这个数据,这里我们通过类似属性的形式给组件模板传入数据,

<demo-grid
  :data="gridData"
  :columns="gridColumns">
 </demo-grid>

然后我们在组件里面把相应的数据继承下来。

Vue.component('demo-grid',{
 template:"#grid-template",
 props: {
  data: Array,
  columns: Array
 }
 });

然后在模板里面替换掉

<script type="text/x-template" id="grid-template">
 <table>
 <thead>
 <tr>
  <th v-for="key in columns">{{key}}</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="entry in data">
  <td v-for="key in columns">{{entry[key]}}</td>
 </tr>
 </tbody>
 </table>
</script>

效果如下

vue.js表格组件开发的实例详解

搜索功能增加

这个时候,我们想加入一个交互,也就是在搜索框增加关键词的时候,表格能够相应地变化。

首先我们要绑定搜索框的模型,也就是用searchQuery来绑定Input

<form id="search">
 Search <input name="query" v-model="searchQuery">
 </form>

在Vue里面增加data的初始化

var demo = new Vue({
 el: '#demo',
 data: {
  searchQuery: '',
  ...
 })

同时,在组件模板里面也进行参数传入

<demo-grid
  :data="gridData"
  :columns="gridColumns"
  :filter-key="searchQuery">
 </demo-grid>

组件的定义里面要继承模板的数据,也就是在模板里面是filter-key,注意要转化驼峰写法

Vue.component('demo-grid', {
 template: '#grid-template',
 props: {
  data: Array,
  columns: Array,
  filterKey: String
 }
})

这个时候,我们的模板里面要过滤符合filterKey的数据,这里就用到了过滤器,vue提供了一个叫做filterBy的过滤器。|与过滤器,第一个为过滤器的名字,后面的是参数,| filterBy filterKey使用的就是filterBy的过滤器,参数是filterKey

<tr v-for="
 entry in data
 | filterBy filterKey>
  <td v-for="key in columns">
  {{entry[key]}}
  </td>
 </tr>

效果如下,我们这样就有了一个 能够过滤的表格

vue.js表格组件开发的实例详解

表格排序

这部分逻辑比前面稍微复杂一点点。首先我们给表格加一个三角形,三角形有两种,一种是正序的,一种是逆序的,我们用span来作为三角形的容器

<th v-for="key in columns"
  @click="sortBy(key)"
  :class="{active: sortKey == key}">
  {{key | capitalize}}
  <span class="arrow">
  </span>
  </th>

三角形的样式有两种,上升的和下降的

.arrow {
 display: inline-block;
 vertical-align: middle;
 width: 0;
 height: 0;
 margin-left: 5px;
 opacity: 0.66;
}

.arrow.asc {
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
 border-bottom: 4px solid #fff;
}

.arrow.dsc {
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
 border-top: 4px solid #fff;
}

dsc的效果如下

vue.js表格组件开发的实例详解

我们希望能够在不同的状态里面切换,所以我们选择在组件里面有数据存储排序的状态信息,用一个sortOrders的对象来存储排序信息 ,同时用一个sortKey来表示当前用来排序的键,我们设置为name

// register the grid component
 Vue.component('demo-grid', {
 template: '#grid-template',
 ...
 data: function () {
  var sortOrders = {}
  this.columns.forEach(function (key) {
  sortOrders[key] = 1
  })
  return {
  sortKey: 'name',
  sortOrders: sortOrders
  }
 }

然后使用orderBy来排序

<tbody>
 <tr v-for="
 entry in data
 | filterBy filterKey
 | orderBy sortKey sortOrders[sortKey]">
  <td v-for="key in columns">
  {{entry[key]}}
  </td>
 </tr>
 </tbody>

现在也就是根据name升序排序,所以我们看到表格的结果如下

vue.js表格组件开发的实例详解

增加交互

我们希望能够通过点击表格头部来自动升序降序,所以添加鼠标事件,另外把span的样式和sortOrders[key]的值相关联,增加active的样式

<th v-for="key in columns"
  @click="sortBy(key)"
  :class="{active: sortKey == key}">
  {{key | capitalize}}
 <span class="arrow"
  :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
 </span>
 </th>

相关active的样式如下

th.active .arrow {
 opacity: 1;
}

对于鼠标事件,我们定义在表格内部,也就是把sortKey定位当前活跃的元素,同时改变sortOrders[key]的值

// register the grid component
 Vue.component('demo-grid', {
 template: '#grid-template',
 props: {
  ...
 },
 data: function () {
 ...
 },
 methods: {
  sortBy: function (key) {
  this.sortKey = key
  this.sortOrders[key] = this.sortOrders[key] * -1
  }
 }
 });

总结

以上就是关于vue.js组件开发的全部内容了,希望这篇文章对大家学习或者使用vue.js能有一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
js自定义回调函数
Dec 13 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 #Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 #Javascript
Vue.js中数组变动的检测详解
Oct 12 #Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 #Javascript
jquery动态创建div与input的实例代码
Oct 12 #Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 #Javascript
jquery动态添加文本并获取值的方法
Oct 12 #Javascript
You might like
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
Python入门篇之文件
2014/10/20 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
python  logging日志打印过程解析
2019/10/22 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
jupyter notebook实现显示行号
2020/04/13 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
如何安装ruby on rails
2014/02/09 面试题
2014厂务公开实施方案
2014/02/17 职场文书
新学期决心书
2014/03/11 职场文书
PHP命令行与定时任务
2021/04/01 PHP
pandas中对文本类型数据的处理小结
2021/11/01 Python