排序分为升序与降序，因为只能对某一列进行排序，所以是互斥操作。我们为每一列新增一个 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); } } }, '↓') ])); } else { ths.push(h('th', col.title)); } }); /** * 创建内容 */ var trs = [];//<tr> 标签数组 this.currentData.forEach(function (row) {//遍历行 var tds = [];//<td> 标签数组 that.currentColumns.forEach(function (cell) {//遍历单元格 tds.push(h('td', row[cell.key])); }); trs.push(h('tr', tds)); }); return h('table', [ h('colgroup', cols), h('thead', [ h('tr', ths) ]), h('tbody', trs) ]) }
创建内容时，我们首先遍历所有行，然后在循环内部遍历所有列，得出 <td> 与 <tr> 内容。
创建表头时，对是否排序做了相应的处理，并绑定了相应的点击事件。
点击事件定义在 methods 中，因为升序与降序逻辑大体相同，所以又封装了一层 order() 排序函数。
order() 排序函数内部使用了数组的 sort() 方法。sort() 方法会调用每个数组项的 toString() 方法，然后比较得到的字符串，即使数组中的每一项是数值，比较的也是字符串。这里传入了一个比较函数作为参数。为了兼容所有浏览器，在比较函数中，我们返回的是 1 或者 -1。
排序之前，先把所有列的排序类型都设置为不排序，然后再更新当前列的排序状态。这就会对应到 render 函数里绑定 <a> 标签的 class 中的 on 样式，即当前列排序状态会被高亮显示。
表格被初始化渲染之后，如果 data 发生变化，那么表格组件数据应该也要同步更新。因此，我们在 watch 中做了数据更新以及数据重排操作。
css：
[v-cloak] { display: none; } table { width: 100%; margin-bottom: 24px; /*合并边框模型*/ border-collapse: collapse; border-spacing: 0; /*在空单元格周围绘制边框*/ empty-cells: show; border: 1px solid #e9e9e9; } table th { font: bold 14px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; background: #CAE8EA; color: #5c6b77; /*设置文本粗细*/ font-weight: 600; /*段落中的文本不进行换行*/ white-space: nowrap; border-top: 1px solid #C1DAD7; } table td, table th { padding: 8px 16px; text-align: left; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; } table th a { /*不独占一行的块级元素*/ display: inline-block; margin: 0 4px; cursor: pointer; } table th a.on { color: #3399ff; } table th a:hover { color: #3399ff; }
效果：
点击此处查看本文示例代码
PS：感兴趣的朋友还可以使用如下在线工具测试上述代码：