}
}
}, '↓')
]));
} 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;
}效果：
