Vue.js 表格組件

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

//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組件結(jié)束

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

    }
});
//創(chuàng)建Vue實(shí)例結(jié)束

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83017.html

相關(guān)文章

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

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

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

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

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

摘要：是一套基于和的表格組件。將的功能進(jìn)行了封裝，并增加了表格的增刪改查數(shù)據(jù)校驗(yàn)表格內(nèi)編輯等常用的功能。大部分功能可由配置實(shí)現(xiàn)，在實(shí)現(xiàn)并擴(kuò)展了表格組件功能的同時(shí)，降低了開發(fā)難度，減少了代碼量，大大簡化了開發(fā)流程。 D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格組件。D2-Crud 將 Element 的功能進(jìn)行了封裝，并增加了表格的增刪改...

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

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

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

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

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