脚本宝典收集整理的这篇文章主要介绍了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实例结束

脚本宝典总结

以上是脚本宝典为你收集整理的Vue.js 表格组件全部内容，希望文章能够帮你解决Vue.js 表格组件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。