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 相关文章推荐
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 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
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
pandas重新生成索引的方法
2018/11/06 Python
python os.fork() 循环输出方法
2019/08/08 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
电脑销售顾问自荐信
2014/01/29 职场文书
党员批评与自我批评
2014/02/12 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
2015学校年度工作总结
2015/05/11 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
详解Vue的options
2021/05/15 Vue.js
python编程项目中线上问题排查与解决
2021/11/01 Python