Vue.js 表格组件

HTML:

<div id="target"></div>

  JS:

//Vue组件开始
var Grid = Vue.extend({
template: '<table class="table" :class="{layoutFixed: config.layoutFixed}">\
<thead>\
<tr>\
<th v-for="col in config.colModel" \
v-if="col.sort" \
:width="col.width" \
:col="col.name" \
:title="removeTag(col.display)" >\

<div class="sort ellipsis" :sortType="col.sortType">{ {col.display}}\
<i class="icon-chevron-up" @click="sortUp"></i>\
<i class="icon-chevron-down" @click="sortDown"></i>\
</div></th>\

​ <th v-else \
​ class="ellipsis"\
​ :width="col.width" \
​ :col="col.name" \
​ :title="removeTag(col.display)" >{ {col.display}}</th>\
​ </tr>\
​ </thead>\
​ <tbody>\
​ <tr v-for="row in resData.rows">\
​ <td v-for="col in config.colModel"\
​ :title="removeTag(row\[col.name\])" v-handle="{handler:col.handler, v:row\[col.name\], data:row}">{ {row\[col.name\]}}</td>\
​ </tr>\
​ </tbody>\
​ </table>',
​ data: function () {
return {
​ url: '',
​ config: {},
​ param: {},
​ resData: {}
​ };
​ },
​ computed: {

},
methods: {
getData: function () {
var self = this;
$.ajax({
url: this.url,
type: 'GET',
data: this.param,
success: function (json) {
json = JSON.parse(json);
self.resData = json.data;
}
});
},
sortUp: function (event) {
$.extend(this.param, {
sortType: $(event.target).parent().attr('sorttype'),
orderType: "1"
});
this.getData();
},
sortDown: function (event) {
$.extend(this.param, {
sortType: $(event.target).parent().attr('sorttype'),
orderType: "2"
});
this.getData();
},
removeTag: function (str) {
if (str) {
str = str.toString();
return str.replace(/<("\[^"\]*"|'\[^'\]*'|\[^"'>\])>/g, '');
} else {
return '';
}
},
log: function (str) {
console.log(str);
}
},
directives: {
handle: {
inserted: function (el, binding) {
var handler = binding.value.handler;
if (handler && $.isFunction(handler)) {
handler(binding.value.v, binding.value.data, $(el), $(el).parent('tr'));
}
}
}
},
mounted: function () {
this.getData();
}

});

Vue.component('grid', Grid);
//Vue组件结束

//创建Vue实例开始
var vm = new Grid({
el: config.renderTo,
data: {
url: config.url,
config: config
},
computed: {

}

});
//创建Vue实例结束