vue.js表格组件开发示例的详细说明

序

组件是Vue.js最强大的功能之一组件可以扩展HTML元素，封装可重用的代码。在更高的层次上，组件是一个自定义元素，Vue.js的编译器为其添加了特殊的功能。在某些情况下，组件也可以是本机HTML元素的形式，这些元素通过is特性进行扩展。

组件开发基础

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

对于vue，组件看起来像这样，我们用html编写它

div id=' example ' my-component/my-component/dive dx然后出来

div id='example' divA自定义组件！/div/div代码divA自定义组件！/div我们只需要写一次。

所以我们需要定义它，并将my-component的标签与代码相关联，所以我们需要定义它

//定义var my component=vue . extend({ template : ' diva自定义组件！在/div'})被定义之后，我们应该让页面渲染它，让Vue知道它的存在

//注册vue.component ('my-component '，my component)//创建根实例new Vue({ el: '#example'})，这是一个非常简单的官网示例。事实上，它类似于一个函数的封装，定义、引入然后执行。

那么一个组件可以引用其他组件，这有点像函数的相互调用。

Varchild=vue。扩展({/*.*/}) varparent=vue。extend ({template3360 ' . '，components: {//my-component只能用在表组件实例的父组件模板“my-component”: Child } })中

这是官网的例子

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

基本结构

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

div id=' demo ' form id=' search ' search输入名称=' query'/form表和表/表/表/div显示效果

添加基本css

正文{ font-family: Helvetica新，Arial，无衬线；font-size : 14px；color: # 444}表格{ border: 2px solid # 42b983border-radius : 3px；背景-color : # fff；}th {背景色： # 42b 983；color: rgba(255，255，255，0.66)；cursor:指针；-web kit-user-select : none；-moz-用户-选择：无；-用户-选择：无；} TD { background-color : # F9 F9 F9；}th，TD { min-width : 120 px；padding: 10px 20px} # search { margin-bottom : 10px；}显示效果如下，

提取成分

我们希望表是一个独立的组件，因此我们定义了一个名为demo-grid的组件，并使用它来生成表

Div id=' demo '表单id=' search ' search input name=' query '/form demo-grid/demo-grid/div代码，关于表的部分放入组件模板，我们定义组件。也就是说，它是由脚本定义的，

脚本类型=' text/x-template ' id=' grid-template '表并定义了tr/th name/th th power/th/tr/t body tr tdjackchan/tdtdtdd 7000/TD/tr/t body/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']，grindata :[{ name: ' Chuck Norris '，power: Infinity }，{ Name : '李小龙'，power: 9000 }，{ Name : '成龙'，Power : 7000 }，{ Name 3333333:这里，我们以相似属性的形式将数据传递给组件模板。

demo-grid : data=' grid ATA ' : columns=' grid columns '/demo-grid，然后我们继承组件中对应的数据。

Vue.component('demo-grid '，{ template:'#grid-template '，props: { data: Array，columns 3360 Array } })；然后在模板中替换它

脚本类型=' text/x-template ' id=' grid-template '表和列' {key}}/th /tr中的第v-for='键ad tbody tr v-for='数据中的条目' TD v-for='列' { entry[key]} }/TD/tr/t body/表/脚本具有以下效果

搜索功能增加

这时候我们要添加一个交互，就是在搜索框中添加关键词的时候，表格可以相应的改变。

首先，我们需要绑定搜索框模型，即把Input和searchQuery绑定在一起

表单id=' search ' search input name=' query ' v-model=' search query '/表单添加了Vue中数据的初始化

Vardemo=newvue ({el:' # demo '，data: { searchquery: ' '，}).同时，参数也在组件模板中传递

demo-grid : data=' grid ATA ' 3360 columns=' grid columns ' : filter-key=' search query '/demo-grid组件的定义要继承模板的数据，即filter-key在模板中，所以要注意转换驼峰编写。

Vue.com(' demo-grid '，{template:' # grid-template '，props: { data:array，columns3360array，filterKey3360string}})此时，我们的模板需要过滤符合filterKey的数据，所以我们在这里使用了一个过滤器，Vue提供了一个|和过滤器，第一个是过滤器的名称，后面是参数。| filterBy filterKey使用filterBy的筛选器，参数为filterKey

Trv-for='数据中的条目|按筛选键筛选TD v-for='列中的键“{entry [key]}}/TD/tr具有以下效果，因此我们有一个可以筛选的表。

表格排序

这部分逻辑比之前稍微复杂一些。首先，我们在表格中添加一个三角形。三角形有两种，一种是正序的，一种是逆序的。我们用跨度作为三角形的容器

Th v-for='列中的键' @ click=' sort by(key)' : class=' { active : sort key==key } ' { { key |大写}} span class=' arrow'/span/th三角形有两种样式，升序和降序。arrow { display : inline-block；垂直对齐：中间；宽度： 0；高度： 0；左边距left: 5pxopacity: 0.66} . arrow . ASC { border-left : 4px实心透明；border-right: 4px实心透明；border-bottom: 4px实心# fff} . arrow . DSC { border-left : 4px纯色透明；border-right: 4px实心透明；border-top: 4px实心# fff}dsc具有以下效果

我们希望能够在不同的状态之间切换，所以我们选择在组件中存储排序状态信息，使用sortOrders对象存储排序信息，并使用sortKey表示当前用于排序的键。我们把它命名为。

//注册网格组件Vue.component('demo-grid '，{ template: '#grid-template '，data : function(){ var sort orders={ } this。columns . foreach(function(key){ sort orders[key]=1 })返回{sortkey :' name '，sortorders 3360 sortorders}}然后使用orderBy。

Tbody tr v-for='数据中的条目|按筛选关键字筛选|按排序关键字排序排序顺序[排序关键字]' TD v-for='列中的关键字' { entry[关键字]}}/TD/tr/tbody现在根据名称按升序排序，因此我们可以看到如下表结果

添加交互

我们希望通过点击表头可以自动上升和下降，所以我们增加了鼠标事件，将span的样式和sortOrders[key]的值关联起来，增加了active的样式

th v-for='列中的键' @click='sortBy(键)' : class=' { active : sort key==key } ' { { key |大写} } span class=' arrow ' : class=' sort orders[键] 0 '？与ASC' :' DSC'/span/th相关的活动样式如下

活跃。arrow { opa city 3360 1；}对于鼠标事件，我们在表内定义，即定位当前活动元素的sortKey，并更改sortOrders[key]的值

//注册网格组件Vue.component('demo-grid '，{ template: '#grid-template '，prop s : }.}，data:函数(){ 0.}，methods: { sortBy:函数(键){ this . sort key=key this . sort orders[键]=this . sort orders[键]*-1 } })；摘要

以上就是vue.js组件的开发。希望这篇文章对你学习或者使用vue.js有帮助，有问题可以留言交流。