≡
  • 网络编程
  • 数据库
  • CMS技巧
  • 软件编程
  • PHP笔记
  • JavaScript
  • MySQL
位置：首页 > 网络编程 > vue.js

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

人气：574 时间：2019-04-07

这篇文章主要为大家详细介绍了vue.js表格组件开发的实例详解，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

前言

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

组件开发的基础

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

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

代码如下：


<div id="example"> 
 <my-component></my-component>
</div>edx
End www.q1010.com

然后就出来

代码如下：


<div id="example"> 
<div>A custom component!</div>
</div>
End www.q1010.com

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

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

代码如下：


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

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

代码如下：


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

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

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

代码如下：


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

一个表格组件的实例

这是官网的例子

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

基本结构

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

代码如下：


<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>
End www.q1010.com

显示效果

加上基本的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;
}
End www.q1010.com

显示效果如下，

提取组件

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

代码如下：


<div id="demo">
 <form id="search">
 Search <input name="query" >
 </form>
 <demo-grid>
 </demo-grid>
</div>
End www.q1010.com

代码里面关于表格的那部分给放到组件模板里面，我们定义组件。也就是用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>
End www.q1010.com

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

代码如下：


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

 var demo = new Vue({
 el:'#demo'
 })
End www.q1010.com

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

组件数据流

我们要让表格知道表格的头部和表格的内容，也就是有一个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 }
  ]
 }
 })
End www.q1010.com

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

代码如下：


<demo-grid
  :data="gridData"
  :columns="gridColumns">
 </demo-grid>
End www.q1010.com

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

代码如下：


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

然后在模板里面替换掉

代码如下：


<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>
End www.q1010.com

效果如下

搜索功能增加

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

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

代码如下：


 <form id="search">
 Search <input name="query" v-model="searchQuery">
 </form>
End www.q1010.com

在Vue里面增加data的初始化

代码如下：


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

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

代码如下：


 <demo-grid
  :data="gridData"
  :columns="gridColumns"
  :filter-key="searchQuery">
 </demo-grid>
End www.q1010.com

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

代码如下：


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

这个时候，我们的模板里面要过滤符合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>
End www.q1010.com

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

表格排序

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

代码如下：


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

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

代码如下：


.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;
}
End www.q1010.com

dsc的效果如下

我们希望能够在不同的状态里面切换，所以我们选择在组件里面有数据存储排序的状态信息，用一个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
  }
 }
End www.q1010.com

然后使用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>
End www.q1010.com

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

增加交互

我们希望能够通过点击表格头部来自动升序降序,所以添加鼠标事件，另外把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>
End www.q1010.com

相关active的样式如下

代码如下：


th.active .arrow {
 opacity: 1;
}
End www.q1010.com

对于鼠标事件，我们定义在表格内部，也就是把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
  }
 }
 });
End www.q1010.com

总结

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

本文来自：http://www.q1010.com/184/2993-0.html

注：关于vue.js表格组件开发的实例详解的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js

您可能感兴趣的文章

  • Vue.js 2.0 和 React、Augular等其他前端框架大比拼
  • vue.js+boostrap项目实践(案例详解)
  • 前端框架Vue.js中Directive知识详解
  • 概述VUE2.0不可忽视的很多变化
  • JS框架之vue.js(深入三:组件1）
  • webpack+vue.js快速入门教程
  • Vue.js动态添加、删除选题的实例代码
  • vue.js中$watch的用法示例
  • require.js 加载 vue组件 r.js 合并压缩的实例
  • Vue.js中数组变动的检测详解
上一篇：vue.js 表格分页ajax 异步加载数据
下一篇：Vue.js中数组变动的检测详解
热门文章
  • Vue 报错TypeError: this.$set is not a function 的解决方法
  • vue实现动态添加数据滚动条自动滚动到底部的示例代码
  • vue项目设置scrollTop不起作用(总结)
  • vue项目中使用vue-i18n报错的解决方法
  • iview实现select tree树形下拉框的示例代码
  • 分析关于element级联选择器数据回显问题
  • vue项目打包后打开页面空白解决办法
  • 解决element ui select下拉框不回显数据问题的解决
  • element-ui table span-method(行合并)的实现代码
  • element-ui 设置菜单栏展开的方法
  • 最新文章
    • 理解vue ssr原理并自己搭建简单的ssr框架
    • vue favicon设置以及动态修改favicon的方法
    • vue-router启用history模式下的开发及非根目录部署方法
    • 从零开始在NPM上发布一个Vue组件的方法步骤
    • Element input树型下拉框的实现代码
    • Vue 报错TypeError: this.$set is not a function 的解决方法
    • Vue.js组件高级特性实例分析
    • 浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
    • 分析Vue.js自定义tipOnce指令用法实例
    • 浅谈vuex actions和mutation的异曲同工

四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。