Vue.js 表格組件

Alliot 發布于2019-08-20 16:35 / 1263人閱讀

//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]}}

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

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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