成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue表格組件

ysl_unh / 1959人閱讀

摘要：基于的封裝用于便捷的在中使用除過特性外，其它與相同。非必設(shè)項(xiàng)篩選條件列表數(shù)組對象。格式在使用時該參數(shù)為必設(shè)項(xiàng)。非必設(shè)項(xiàng)，選中的過濾條件將會覆蓋否為多選布爾值默認(rèn)為。刷新更新查詢條件其它更多請直接訪問查看當(dāng)前版本

GridManager Vue 
基于 Vue 的 GridManager 封裝, 用于便捷的在 Vue 中使用GridManager. 除過Vue特性外，其它API與GridManager API相同。

API 
該文檔為GridManager的文檔，除了columnData中存在差異外，其它使用方式相同。

API

Demo

帶搜索的表格

Core code

GridManager

jTool

開發(fā)環(huán)境

ES2015 + webpack + Vue + gridmanager

安裝 
npm install gridmanager-vue --save
使用 Vue全局組件 
import GridManager from "gridmanager-vue";
Vue.use(GridManager);
Vue局部組件 
import GridManager from "gridmanager-vue";

new Vue({
    el: "#app",
    components: {
        GridManager
    }
});
示例 
// 表格
gridOption = {
    // 表格唯一標(biāo)識
    gridManagerName: "test-gm",

    // 高度
    height: "300px",

    // 首次是否加載
    firstLoading: false,

    // 列配置
    columnData: [
        {
            key: "shopId",
            width: "180px",
            text: "店鋪id",
            align: "center"
        },{
            key: "platId",
            text: "平臺",

            // template=> function: return dom
            template: platId => {
                const span = document.createElement("span");
                span.style.color = "blue";
                span.innerText = platId;
                return span;
            }
        },{
            key: "platNick",
            text: "店鋪名稱",

            // template=> string dom
            template: `跟據(jù)相關(guān)法規(guī)，該單元格被過濾`
        },{
            key: "createTime",
            text: "創(chuàng)建時間",
        },{
            key: "updateTime",
            text: "更新時間",

            // 表頭篩選條件, 該值由用戶操作后會將選中的值以{key: value}的形式覆蓋至query參數(shù)內(nèi)。非必設(shè)項(xiàng)
            filter: {
                // 篩選條件列表, 數(shù)組對象。格式: [{value: "1", text: "HTML/CSS"}],在使用filter時該參數(shù)為必設(shè)項(xiàng)。
                option: [
                    {value: "1", text: "HTML/CSS"},
                    {value: "2", text: "nodeJS"},
                    {value: "3", text: "javaScript"},
                    {value: "4", text: "前端雞湯"},
                    {value: "5", text: "PM Coffee"},
                    {value: "6", text: "前端框架"},
                    {value: "7", text: "前端相關(guān)"}
                ],
                // 篩選選中項(xiàng)，字符串, 默認(rèn)為""。 非必設(shè)項(xiàng)，選中的過濾條件將會覆蓋query
                selected: "3",
                // 否為多選, 布爾值, 默認(rèn)為false。非必設(shè)項(xiàng)
                isMultiple: false
            },
            // template=> function: return string dom
            template: updateTime => {
                return `${updateTime}`;
            }
        },{
            key: "action",
            text: "操作",
            width: "100px",
            align: "center",

            // tempalte中使用了vue模塊，則必須將參數(shù)useCompile配置為true，否則vue模版將不會解析。
            useCompile: true,

            // template=> function: return vue template, 需配置useCompile=true
            // vue模版中將自動添加row字段，該字段為當(dāng)前行所使用的數(shù)據(jù)
            // vue模版將不允許再使用template函數(shù)中傳入的參數(shù)
            template:() => {
                return "解除綁定";
            }
        }
    ],
    // 使用分頁
    supportAjaxPage: true,

    // 數(shù)據(jù)來源，類型: string url || data || function return[promise || string url || data]
    ajax_data: (settings, params) => {
        return tenantRelateShop(params);
    },

    // 請求失敗后事件
    ajax_error: err => {
        console.log(err);
    },

    // checkbox選擇事件
    checkedAfter: rowList => {
        this.selectedCheck(rowList);
    },

    // 每頁顯示條數(shù)
    pageSize: 20

    // ...更多配置請參考API
};
調(diào)用公開方法 
GM對象掛在Element.prototype上，這里是通過vue方式獲取table dom。無論通過哪種方式，只要獲取到table dom就可通過GM函數(shù)調(diào)用方法。
// 刷新
this.$refs["grid"].$el.GM("refreshGrid");

// 更新查詢條件
this.$refs["grid"].$el.GM("setQuery", this.searchForm);

// ...其它更多請直接訪問API
查看當(dāng)前版本 
import GridManager from "gridmanager-vue";
console.log("GridManager", GridManager.version);

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

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

相關(guān)文章

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

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

    yedf 評論0 收藏0

  • Vue表格組件--GridManager Vue

    摘要：基于的封裝用于便捷的在中使用除過特性外，其它與相同。非必設(shè)項(xiàng)篩選條件列表數(shù)組對象。格式在使用時該參數(shù)為必設(shè)項(xiàng)。并且使用服務(wù)需要提前通過將注冊至全局組件。刷新或更新查詢條件或其它更多請直接訪問查看當(dāng)前版本 GridManager Vue 基于 Vue 的 GridManager 封裝, 用于便捷的在 Vue 中使用GridManager. 除過Vue特性外，其它API與GridManag...

    khs1994 評論0 收藏0

  • vue初探--編寫表格組件

    摘要：容器里面包含部分，其一為提供過濾器的入口其二為表格組件。數(shù)據(jù)綁定，簡寫形式為在父組件和子組件的通訊中，必須要在子組件里面聲明。如果是編寫則必須是注冊組件的語法糖。下次還是上動圖吧以后基本上碰到這種使用表格呈現(xiàn)數(shù)據(jù)的組件。 在項(xiàng)目當(dāng)中，經(jīng)常會有表格組件，包含2部分，其一為table-header,其二為table-content 然后在這個小demo里面涉及到了vue的個別指令: v-f...

    dabai 評論0 收藏0

  • D2 Crud，一款簡單易用的表格組件

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

    fevin 評論0 收藏0

  • 一個通用的vue的表格組件

    摘要：在做業(yè)務(wù)組件的時候需要自己自己封裝一個通用的表格，這個表格需要符合我們一切的好的幻想，左右固定，表頭固定，分頁，選擇，一直表格內(nèi)容的行數(shù)限制等等，下面就為大家介紹一下這一款表格組件功能以及怎么使用。 在做業(yè)務(wù)組件的時候需要自己自己封裝一個通用的表格，這個表格需要符合我們一切的好的幻想，左右固定，表頭固定，分頁，選擇，一直表格內(nèi)容的行數(shù)限制等等，下面就為大家介紹一下這一款表格組件功能以及...

    caoym 評論0 收藏0

發(fā)表評論

0條評論

ysl_unh

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<