助力高校计算机教育 —— 码云为老师推出免费高校版,高达 200 人的协作团队
Watch Star Fork

拭目以待 / GridManager-VueJavaScript

加入码云
与超过 200 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
GridManager by Vue
baukh789 最后提交于 fix v-model bug
Loading...
README.md 4.71 KB

GridManager Vue

基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外,其它API与GridManager API相同。

Build Status npm version npm downloads coverage

API

该文档为GridManager的文档,除了columnData中存在差异外,其它使用方式相同。

Demo

Core code

开发环境

ES2015 + webpack + Vue + gridmanager

安装

npm install gridmanager-vue

使用

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: '更新时间',

                // 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 => {
            return tenantRelateShop(Object.assign({}, this.searchParams, settings.pageData));
        },

        // 请求失败后事件
        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);

项目点评 ( 1 )

你可以在登录后,发表评论

10_float_left_people 10_float_left_close