vue表格⾥的html怎么,vue.js表格组件开发的实例详解前⾔
组件(Component)是 Vue.js 最强⼤的功能之⼀。组件可以扩展 HTML 元素，封装可重⽤的代码。在较⾼层⾯上，组件是⾃定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原⽣ HTML 元素的形式，以 is 特性扩展。
组件开发的基础
组件可以扩展 HTML 元素，封装可重⽤的代码。我理解为功能模块的模板吧。
对于vue来说，组件是这个样⼦的，我们在html⾥⾯写
然后就出来
A custom component!
代码
A custom component!
我们只要写⼀遍就⾏了 。
所以我们需要定义它，把 my-component的标签和代码关联起来，所以我们要定义它
// 定义
var MyComponent = d({
template: '
A custom component!
'
})
定义了之后，我们要让页⾯能够渲染它，让Vue知道它的存在
// 注册
Vueponent('my-component', MyComponent)
// 创建根实例
new Vue({
el: '#example'
})
以上，是官⽹⼀个⾮常简单的例⼦ ，其实觉得和⼀个function的封装也差不多，定义，引⼊，然后执⾏。
然后⼀个组件可以引⽤别的组件的东西，有点像函数的互相调⽤啊。
var Child = d({ /* ... */ })
var Parent = d({
template: '...',
components: {
// 只能⽤在⽗组件模板内
'my-component': Child
}
})
⼀个表格组件的实例
这是官⽹的例⼦
这个是⼀个可以排序的表格的例⼦。我们从头开始来制作⼀个可以排序的表格。基本结构
⾸先分成两个部分，⼀个是搜索框，⼀个是表格本⾝，我们可以得到这样的结构Search
namepower
Jack Chan7000
显⽰效果
加上基本的css
body {
sort函数 js
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;
}
显⽰效果如下，
提取组件
我们是想要让表格成为单独的组件，所以我们定义⼀个叫做 demo-grid的组件，⽤它来⽣成表格
Search
代码⾥⾯关于表格的那部分给放到组件模板⾥⾯，我们定义组件。也就是⽤script来定义,
namepower
Jack Chan7000
定义完了之后我们要在给Vue注册组件模块，然后进⾏Vue的渲染
Vueponent('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 }
]
}
})
然后我们的组件也要接受这个数据，这⾥我们通过类似属性的形式给组件模板传⼊数据，
:data="gridData"
:columns="gridColumns">
然后我们在组件⾥⾯把相应的数据继承下来。
Vueponent('demo-grid',{
template:"#grid-template",
props: {
data: Array,
columns: Array
}
});
然后在模板⾥⾯替换掉
{{key}}
{{entry[key]}}
效果如下
搜索功能增加
这个时候，我们想加⼊⼀个交互，也就是在搜索框增加关键词的时候，表格能够相应地变化。⾸先我们要绑定搜索框的模型，也就是⽤searchQuery来绑定Input
Search
在Vue⾥⾯增加data的初始化
var demo = new Vue({
el: '#demo',
data: {
searchQuery: '',
...
})
同时，在组件模板⾥⾯也进⾏参数传⼊
:data="gridData"
:columns="gridColumns"
:filter-key="searchQuery">
组件的定义⾥⾯要继承模板的数据，也就是在模板⾥⾯是filter-key，注意要转化驼峰写法
Vueponent('demo-grid', {
template: '#grid-template',
props: {
data: Array,
columns: Array,
filterKey: String
}
})
这个时候，我们的模板⾥⾯要过滤符合filterKey的数据，这⾥就⽤到了过滤器，vue提供了⼀个叫做filterBy的过滤器。|与过滤器，第⼀个为过滤器的名字，后⾯的是参数，| filterBy filterKey使⽤的就是filterBy的过滤器，参数是filterKey
{{entry[key]}}
效果如下，我们这样就有了⼀个 能够过滤的表格
表格排序
这部分逻辑⽐前⾯稍微复杂⼀点点。⾸先我们给表格加⼀个三⾓形，三⾓形有两种，⼀种是正序的，⼀种是逆序的，我们⽤span来作为三⾓形的容器
@click="sortBy(key)"
:class="{active: sortKey == key}">
{{key | capitalize}}
三⾓形的样式有两种，上升的和下降的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。