Render函数封装一个可排序的表格组件

主要思路:

     　在v-table组件props接受两个参数，一个就是有多少列columns(数组),另一个就是data(数组),同时又简单的添加一个stripe是否给表格设置一个简单的样式.如下图：

接下来就是render主要思想：在构造元素时，首先要构造标题(<th>)，那么就要循环父组件传来的columns数组，不断的遍历里面的对象循环显示(但是在有排序功能的需要再添加a标签),同理：循环显示data，不说了，直接上代码：

render:function(h){//在这里构造DOM

var _this = this;

 

//构造表格的头部标题

var ths = [];

this.currentColumns.forEach((col,index) => {

if(col.sortTable){

ths.push(h('th',[

h('span',col.title),

h('a',{

class:{//这是设置点击后的css属性 ,逻辑就是当我点击了会在函数中修改_sortType的值，在这里根据值去设定属性

on:col._sortType === 'asc'

},

on:{

click:function(){

_this