Vue.js 表格組件

Alliot 發(fā)布于2019-08-20 16:35 / 1330人閱讀

//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組件結束

//創(chuàng)建Vue實例開始
var vm = new Grid({
    el: config.renderTo,
    data: {
        url: config.url,
        config: config
    },
    computed: {

    }
});
//創(chuàng)建Vue實例結束

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

GPU云服務器云服務器 vuejs表格組件 bootstrap表格組件 Vue.js vue.js 屬性

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/83017.html

基于vue.js實現(xiàn)樹形表格的封裝

摘要：此頁面是實現(xiàn)樹表格的關健頁面。這里就是關健點，因為這個子組件是需要遞歸實現(xiàn)，所以，需要動態(tài)注冊到當前組件中。補充一點不要只看部分，部分才是這個樹表格的關健所在。基于vue.js實現(xiàn)樹形表格的封裝（vue-tree-table）前言由于公司產(chǎn)品（基于vue.js）需要，要實現(xiàn)一個樹形表格的功能，百度、google找了一通，并沒有發(fā)現(xiàn)很靠譜的，也不是很靈活。所以就用vue自己擼了一個...

yedf 2019-08-26 12:09 評論0 收藏0
Vue 2019開發(fā)者圖譜

摘要：為了便于您更清晰的理解的體系架構，在這里我將為您展示年開發(fā)者知識圖譜，它包含了所有開發(fā)過程中的關鍵部分。在數(shù)據(jù)展示前端導入導出圖表面板數(shù)據(jù)綁定等場景無需大量代碼開發(fā)和測試，可極大節(jié)省企業(yè)研發(fā)成本并降低交付風險。作為 Vue 的初學者，您或許已經(jīng)聽過很多關于它的專業(yè)術語了，例如：單頁面應用程序、異步組件、服務器端呈現(xiàn)等，您可能還聽過和Vue經(jīng)常一起被提到的工具和庫，如Vuex、Webp...

cgspine 2019-08-23 18:14 評論0 收藏0
D2 Crud，一款簡單易用的表格組件

摘要：是一套基于和的表格組件。將的功能進行了封裝，并增加了表格的增刪改查數(shù)據(jù)校驗表格內編輯等常用的功能。大部分功能可由配置實現(xiàn)，在實現(xiàn)并擴展了表格組件功能的同時，降低了開發(fā)難度，減少了代碼量，大大簡化了開發(fā)流程。 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）：實現(xiàn)多條件篩選、搜索、排序及分頁的表格功能

摘要：基礎布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應較為強烈的原因。與上周的第一篇實踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時也將對filter功能與computed屬性進行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...

Profeel 2019-08-21 10:51 評論0 收藏0
Vue.js 實踐（2）：實現(xiàn)多條件篩選、搜索、排序及分頁的表格功能

摘要：基礎布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應較為強烈的原因。與上周的第一篇實踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時也將對filter功能與computed屬性進行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...

ChanceWong 2019-08-01 15:21 評論0 收藏0