vue表格組件

GridManager Vue

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

API

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

• API

Demo

• 帶搜索的表格

Core code

• GridManager
• jTool

開發環境

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
    }
});

示例

<grid-manager :option="gridOption" ref="grid"></grid-manager>

// 表格
gridOption = {
    // 表格惟一標識
    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: `<span style="color: red">跟據相關法規，該單元格被過濾</span>`
        },{
            key: 'createTime',
            text: '建立時間',
        },{
            key: 'updateTime',
            text: '更新時間',

            // 表頭篩選條件, 該值由用戶操做後會將選中的值以{key: value}的形式覆蓋至query參數內。非必設項
            filter: {
                // 篩選條件列表, 數組對象。格式: [{value: '1', text: 'HTML/CSS'}],在使用filter時該參數爲必設項。
                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: '前端相關'}
                ],
                // 篩選選中項，字符串, 默認爲''。 非必設項，選中的過濾條件將會覆蓋query
                selected: '3',
                // 否爲多選, 布爾值, 默認爲false。非必設項
                isMultiple: false
            },
            // template=> function: return string dom
            template: updateTime => {
                return `<span style="color: blue">${updateTime}</span>`;
            }
        },{
            key: 'action',
            text: '操做',
            width: '100px',
            align: 'center',

            // tempalte中使用了vue模塊，則必須將參數useCompile配置爲true，不然vue模版將不會解析。
            useCompile: true,

            // template=> function: return vue template, 需配置useCompile=true
            // vue模版中將自動添加row字段，該字段爲當前行所使用的數據
            // vue模版將不容許再使用template函數中傳入的參數
            template:() => {
                return '<el-button size="mini" type="danger" @click="delRelation(row)">解除綁定</el-button>';
            }
        }
    ],
    // 使用分頁
    supportAjaxPage: true,

    // 數據來源，類型: 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);
    },

    // 每頁顯示條數
    pageSize: 20

    // ...更多配置請參考API
};

調用公開方法

GM對象掛在Element.prototype上，這裏是經過vue方式獲取table dom。不管經過哪一種方式，只要獲取到table dom就可經過GM函數調用方法。

// 刷新
this.$refs['grid'].$el.GM('refreshGrid');

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

// ...其它更多請直接訪問API

查看當前版本

import GridManager from 'gridmanager-vue';
console.log('GridManager', GridManager.version);