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