},
{
title: '单价',
key: 'unitPrice',
width:'20%',
sortable: true
}
],
data: [
{
name: '真果粒牛奶饮品',
num: 2,
unitPrice: 59.9
},
{
name: '苏泊尔（SUPOR）电压力锅 ',
num: 1,
unitPrice: 378.0
},
{
name: '乐事（Lay's）薯片',
num: 3,
unitPrice: 63.0
}
] },
methods:{
add:function () {
this.data.push( {
name: '良品铺子 休闲零食大礼包',
num: 5,
unitPrice: 59.80
});
}
}
});
为了让排序后的 columns 与 data 不影响原始数据，我们在组件的 data 中定义了相应的当前数据对象。因此在 method 中使用传入的值，初始化这些数据对象，最后在 mounted() 调用这些初始化方法。
columns 中的每一项都是包含 title（列名）、key（对应 data 中的字段名）、width（宽度） 以及 sortable（是否可排序） 的对象。其中，只有 sortable 为可选项，如果设定为 true，则表示该列可点击排序。
map() 会对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组。
排序分为升序与降序，因为只能对某一列进行排序，所以是互斥操作。我们为每一列新增一个 sortType ，用于标识该列的排序类型，初始值为 normal，表示不排序。
因为排序字段可能是任意列，所以我们为每一列新增一个 index，用于标识当前列在数组中的索引。
在 Render 函数中，首先创建列样式与表头，接着创建内容。
Render 函数中的 createElement 可以简写为 h，这样代码会变得更简洁：
render: function (h) {
var that = this;
/**
* 创建列样式与表头
*/
var ths = [];//<th> 标签数组
var cols = [];//<cols> 标签数组
this.currentColumns.forEach(function (col, index) {
if (col.width) {//创建列样式
cols.push(h('col', {
style: {
width: col.width
}
}))
}
if (col.sortable) {
ths.push(h('th', [
h('span', col.title),
//升序
h('a', {
class: {
on: col.sortType === 'asc'
},
on: {
click: function () {
that.sortByAsc(index)
}
}
}, '↑'),
//降序
h('a', {
class: {
on: col.sortType === 'desc'
},
on: {
click: function () {
that.sortByDesc(index);
