Vue.js 表格组件

Alliot 发布于2019-08-20 16:35 / 1153人阅读

//Vue组件开始
var Grid = Vue.extend({
    template: "
                
                    
                        
                        {{col.display}}
                        
                        
                        
                        {{col.display}}
                    
                
                
                    
                        {{row[col.name]}}
                    
                
            ",
    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实例结束

{{col.display}}	{{col.display}}
{{row[col.name]}}

私有云服务器托管 vuejs表格组件 bootstrap表格组件 Vue.js vue.js 属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83017.html

基于vue.js实现树形表格的封装

摘要：此页面是实现树表格的关健页面。这里就是关健点，因为这个子组件是需要递归实现，所以，需要动态注册到当前组件中。补充一点不要只看部分，部分才是这个树表格的关健所在。基于vue.js实现树形表格的封装（vue-tree-table）前言由于公司产品（基于vue.js）需要，要实现一个树形表格的功能，百度、google找了一通，并没有发现很靠谱的，也不是很灵活。所以就用vue自己撸了一个...

yedf 2019-08-26 12:09 评论0 收藏0
Vue 2019开发者图谱

摘要：为了便于您更清晰的理解的体系架构，在这里我将为您展示年开发者知识图谱，它包含了所有开发过程中的关键部分。在数据展示前端导入导出图表面板数据绑定等场景无需大量代码开发和测试，可极大节省企业研发成本并降低交付风险。作为 Vue 的初学者，您或许已经听过很多关于它的专业术语了，例如：单页面应用程序、异步组件、服务器端呈现等，您可能还听过和Vue经常一起被提到的工具和库，如Vuex、Webp...

cgspine 2019-08-23 18:14 评论0 收藏0
D2 Crud，一款简单易用的表格组件

摘要：是一套基于和的表格组件。将的功能进行了封装，并增加了表格的增删改查数据校验表格内编辑等常用的功能。大部分功能可由配置实现，在实现并扩展了表格组件功能的同时，降低了开发难度，减少了代码量，大大简化了开发流程。 D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格组件。D2-Crud 将 Element 的功能进行了封装，并增加了表格的增删改...

fevin 2019-08-23 11:43 评论0 收藏0
Vue.js 实践（2）：实现多条件筛选、搜索、排序及分页的表格功能

摘要：基础布局的中主要为部分，分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后，提出废弃部分功能后许多人反应较为强烈的原因。与上周的第一篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格入手，展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比，说明各自的适用场景，也为vue2.0版本中即将删除的部...

Profeel 2019-08-21 10:51 评论0 收藏0
Vue.js 实践（2）：实现多条件筛选、搜索、排序及分页的表格功能

摘要：基础布局的中主要为部分，分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后，提出废弃部分功能后许多人反应较为强烈的原因。与上周的第一篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格入手，展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比，说明各自的适用场景，也为vue2.0版本中即将删除的部...

ChanceWong 2019-08-01 15:21 评论0 收藏0