分析vuejs官网上一个表格组件的实现过程。
原址：https://cn.vuejs.org/v2/examples/grid-component.html
1、新建一个demo和vue实例
<!--html-->
<div id="demo"></div>
//js
var demo=new Vue({
el:"#demo"
});
2、新建一个Vue实例，并用data声明一个数据对象，定义表格所需的数据
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 }
],
//input组件中v-model双向绑定的数据值
searchQuery : ''
}
});
3、注册一个子组件组件demo-grid，并在父实例的模块中以自定义元素<demo-grid></demo-grid>的形式使用
要让子组件使用父组件的数据，我们需要通过props选项。子组件要显式的用props选项声明它期待获得的数据
<!--html-->
<div id="demo">
<!--搜索框-->
<form id="search">
<!--用v-model实现了input输入框数据的双向绑定-->
Search <input name="query" v-model="searchQuery">
</form>
<!--表格-->
<demo-grid
<!--这里是绑定了几个自定义属性，属性值为Vue实例data中的数据值-->
:data="gridData"
:columns="gridColumns"
:filter-key="searchQuery"
></demo-grid>
</div>
//js 创建一个子组件
Vue.component("demo-grid",{
template:"#grid-template",
props: {
//获得父组件的数据并定义了数据类型
data: Array,
columns: Array,
filterKey: String
},
});
4、X-template
定义模版的方式：在 JavaScript 标签里使用 text/x-template 类型，并且指定一个 id="grid-template"，所定义的就相当于上文子组件中template的内容
<!--html-->
<!--X-template定义的模板放到html标签中-->
<script type="text/x-template" id="grid-template">
<table>
<thead>
<tr>
<th
<!--遍历columns数组(即:["name","power"])，取出每一项-->
v-for="key in columns"
<!--注册一个click事件，事件函数为sortBy并将点击的相应的键值传参到函数里面去-->
@click="sortBy(key)"
<!--如果两者相等，则应用active样式-->
:class="{ active: sortKey == key }"
>
<!--使用capitalize过滤值-->
{{ key | capitalize }}
<!--箭头符号样式-->
<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"></span>
</th>
</tr>
</thead>
<tbody>
<!--遍历计算属性中filteredData计算后返回的data值-->
<tr v-for="entry in filteredData">
<td v-for="key in columns">
{{entry[key]}}
</td>
</tr>
</tbody
</table>
</script>
5、为子组件（demo-grid）继续添加选项对象
①data
定义子组件内部的数据对象。
子组件这里的data必须是一个函数。
data: function () {
//定义一个sortOrders空对象
var sortOrders = {};
//遍历columns值(也就是父组件中的数据值['name', 'power']),将每一项的值设为1，即:{name:1,power:1}
this.columns.forEach(function (key) {
sortOrders[key] = 1
});
//返回一个空字符串值sortKey(下文会讲作用)和sortOrders对象
return {
sortKey: '',
sortOrders: sortOrders
};
},
②methods方法
methods: {
//当在父组件tr那里点击了click事件，就会调用这个函数
sortBy: function (key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
}
}
③computed计算属性
computed: {
filteredData: function () {
var sortKey = this.sortKey
var filterKey = this.filterKey && this.filterKey.toLowerCase()
var order = this.sortOrders[sortKey] || 1
var data = this.data
if (filterKey) {
/*原本的data数据值
* data:[
* { name: 'Chuck Norris', power: Infinity },
* { name: 'Bruce Lee', power: 9000 },
* { name: 'Jackie Chan', power: 7000 },
* { name: 'Jet Li', power: 8000 }
* ]
*/
//filter函数方法会筛选出data数组中为true的项
data = data.filter(function (row) {
//然后将里面的每一项（也就是对象）中的键值进行与输入的filterKey值进行匹配搜索，
//大于-1则将该项返回组成新的data
return Object.keys(row).some(function (key) {
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
})
})
}
if (sortKey) {
//复制一份data数据，然后进行sort排序，组成新的表格排序
data = data.slice().sort(function (a, b) {
a = a[sortKey]
b = b[sortKey]
return (a === b ? 0 : a > b ? 1 : -1) * order
})
}
return data
}
},
④filters
filters: {
capitalize: function (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
}
6、最后子组件就是这样：
Vue.component('demo-grid', {
template: '#grid-template',
props: {
data: Array,
columns: Array,
filterKey: String
},
data: function () {
var sortOrders = {}
this.columns.forEach(function (key) {
sortOrders[key] = 1
})
return {
sortKey: '',
sortOrders: sortOrders
}
},
computed: {
filteredData: function () {
var sortKey = this.sortKey
var filterKey = this.filterKey && this.filterKey.toLowerCase()
var order = this.sortOrders[sortKey] || 1
var data = this.data
if (filterKey) {
data = data.filter(function (row) {
return Object.keys(row).some(function (key) {
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
})
})
}
if (sortKey) {
data = data.slice().sort(function (a, b) {
a = a[sortKey]
b = b[sortKey]
return (a === b ? 0 : a > b ? 1 : -1) * order
})
}
return data
}
},
filters: {
capitalize: function (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
},
methods: {
sortBy: function (key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
}
}
})
