Vue.js 表格組件

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

//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實例結束