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

Vue 前端之家
前端之家收集整理的这篇文章主要介绍了vue.js表格组件开发的实例详解，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_4030@

前言


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

@H_403_0@

组件开发的基础

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

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

edx
@H_403_0@然后就出来

A custom component!
@H_403_0@代码
A custom component!
我们只要写一遍就行了 。

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

A custom component!
' })
@H_403_0@定义了之后，我们要让页面能够渲染它，让Vue知道它的存在

注册 Vue.component('my-component',MyComponent) // 创建根实例 new Vue({ el: '#example' })
@H_403_0@以上，是官网一个非常简单的例子 ，其实觉得和一个function的封装也差不多，定义，引入，然后执行。

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

只能用在父组件模板内 'my-component': Child } })
@H_403_0@

一个表格组件的实例

@H_403_0@这是官网的例子

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

@H_403_0@基本结构

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

name power
@H_403_0@

显示效果

@H_403_0@

加上基本的css

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

th {
background-color: #42b983;
color: rgba(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;
}

@H_403_0@

显示效果如下，

@H_403_0@提取组件

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

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

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

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

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

@H_403_0@组件数据流

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

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

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

@H_403_0@然后在模板里面替换掉

@H_403_0@

效果如下

@H_403_0@搜索功能增加

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

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

@H_403_0@在Vue里面增加data的初始化

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

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

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

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

@H_403_0@表格排序

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

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

.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;
}

@H_403_0@

dsc的效果如下

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

@H_403_0@然后使用orderBy来排序

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

@H_403_0@增加交互

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

@H_403_0@相关active的样式如下

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

@H_403_0@

总结

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

vuevuevuevue.jsvuejs组件开发实例组件实例组件开发

猜你在找的Vue相关文章

elementui的el-tree第一次加载无法展开和选中的问题
问题现象 elmentui的el-tree数据加载问题，导致第一次加载选中当前节点和高亮当前节点没有...
VSCODE打开一个文件，另一个文件就关闭的问题的解决方法
因为刚打开文件，vscode默认是预览状态，如果编辑过之后，就不会有这个问题。 可以通过双击...
一文带你学会国产加密算法SM4的vue实现方案
前言 上篇文章我们介绍了国产SM4加密算法的后端java实现方案。没有看过的小伙伴可以看一下...
解决vue报错：Module build failed (from ./node_modules/_eslint-loader@2.2.1@eslint-loader/index.js): TypeError: Cannot read property 'range' of null
在项目中引入动态路由时报错 写法: 报错: Module build failed (from ./node_modules/_esl...
vue中解决Uncaught ReferenceError: regeneratorRuntime is not defined问题
问题产生 在使用babel编译es6时，遇到报错Uncaught ReferenceError: regeneratorRuntime i...
element-UI中手动调用table排序
<el-table :data="tableData" "width...
Vue双向绑定原理及其实现
在之前面试的时候被面试官问到是否了解Vue双向绑定的原理，其实自己之前看过双向绑定的原理...
Vue事件修饰符详解
整体学习Vue时看到Vue文档中有事件修饰符的描述，但是看了之后并没有理解是什么意思，于是...
Vue-router插件使用
单页面原理 Vue是单页面开发，即页面不刷新。 页面不刷新，而又要根据用户选择完成内容的更...
Vue 分支循环
v-for 通过v-for进行循环，不光可以拿到元素本身，也可以拿到索引值。 如果数据是对象类型...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作