Vue框架内使用GridManager

vue,vue gridmanager, gridmanager

拭目以待 发布于

GridManager对Vue很友好,发布了针对于Vue的npm包。


相关地址

gridmanager-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: configs.faq2.label,

    // 高度
    height: '300px',

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

    // 列配置
    columnData: [
        {
            key: 'shopId',
            width: '180px',
            text: '店铺id',
            align: 'center'
        },{
            key: 'platId',
            text: '平台',
            // function: return dom
            template: platId => {
                const span = document.createElement('span');
                span.style.color = 'blue';
                span.innerText = platId;
                return span;
            }
        },{
            key: 'platNick',
            text: '店铺名称',
            // string dom
            template: `<span style="color: red">跟据相关法规,该单元格被过滤</span>`
        },{
            key: 'createTime',
            text: '创建时间',
        },{
            key: 'updateTime',
            text: '更新时间',
            // function: return string dom
            template: updateTime => {
                return `<span style="color: blue">${updateTime}</span>`;
            }
        },{
            key: 'action',
            text: '操作',
            width: '100px',
            align: 'center',
            useCompile: true,
            // function: return vue template, 同时必需配置useCompile=true
            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 => {
        const remoteError = err && (err.body && (err.body.internalMessage || err.body.message || err.body.msg));
        remoteError && this.$message.error(remoteError);
    },

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

    // 每页显示条数
    pageSize: 20

    // 更多配置请参考GridManager API,
};




查看当前版本

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


gridmanager-vue仅是gridmanager的一个vue封装,api与gridmanager共用。详细api请点这里