开源软件名称：

GridManager-Vue

开源软件地址：

https://gitee.com/baukh/GridManager-Vue

开源软件介绍：

GridManager Vue

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

实现功能

功能	描述
宽度调整	表格的列宽度可进行拖拽式调整
位置更换	表格的列位置进行拖拽式调整
配置列	可通过配置对列进行显示隐藏转换
表头吸顶	在表存在可视区域的情况下,表头将一直存在于顶部
列固定	指定某列固定在左侧或右侧
排序	表格单项排序或组合排序
分页	表格ajax分页,包含选择每页显示总条数和跳转至指定页功能
用户偏好记忆	记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数
序号	自动生成序号列
全选	自动生成全选列
导出	静态数据导出、动态数据导出、已选数据导出
打印	当前页打印
右键菜单	常用功能在菜单中可进行快捷操作
过滤	通过对列进行过滤达到快速搜索效果
合并	同一列下相同值的单元格可自动合并
树表格	可通过配置快速实现树型表格结构
行移动	可通过配置快速实现行位置移动

API

该文档为原生GridManager的文档，vue版本除了在columnData.text columnData.template topFullColumn.template中可以使用vue模版外，其它使用方式相同。

Demo

该示例为原生GridManager的示例，vue版本除了在columnData.text columnData.template topFullColumn.template中可以使用vue模版外，其它使用方式相同。

Core code

开发环境

ES2015 + webpack + Vue + GridManager

安装

npm install gridmanager-vue --save

项目中引用

es2015引入方式

import GridManager from 'gridmanager-vue';import 'gridmanager-vue/css/gm-vue.css';

通过script标签引入

<link rel="stylesheet" href="../node_modules/gridmanager-vue/css/gm-vue.css"><script src="../node_modules/gridmanager-vue/js/gm-vue.js"></script>

Vue全局组件

import GridManager from 'gridmanager-vue';import 'gridmanager-vue/css/gm-vue.css';Vue.use(GridManager);

Vue局部组件

import GridManager from 'gridmanager-vue';import 'gridmanager-vue/css/gm-vue.css';new Vue({    el: '#app',    components: {        GridManager    }});

示例

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

const app = new Vue({    el: '#app',    data: {        // 表格渲染回调函数        // query为gmOptions中配置的query        callback: function(query) {            console.log('callback => ', query);        },        // 表格        gridOption = {            // 表格唯一标识            gridManagerName: 'test-gm',            // 高度            height: '300px',            // 首次是否加载            firstLoading: false,            // 列配置            columnData: [                {                    key: 'shopId',                    width: '180px',                    text: '店铺id',                    align: 'center'                },{                    key: 'platId',                    text: '平台',                    // template=> function: return dom                    // 参数介绍                    // platId: 当前行数据中与配置项key相同字段的值                    // row: 当前行数据                    // index: 当前行所在数据中的索引值                    template: (platId, row, index) => {                        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',                    // template=> function: return vue template                    // 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]            ajaxData: (settings, params) => {                return tenantRelateShop(params);            },            // 请求失败后事件            ajaxError: err => {                console.log(err);            },            // checkbox选择事件            checkedAfter: rowList => {                this.selectedCheck(rowList);            },            // 每页显示条数            pageSize: 20            // ...更多配置请参考API        }    },    methods: {        // 解除绑定        delRelation: function(row) {            // ... 解除绑定操作        }    }});

关于配置项中的this指向

可能引起this指向错误的方式:

表格配置项在data中配置时，配置项内所包含的函数this指向并不是VueComponents。
使用Class声明方式时，配置项内所包含的函数this指向为class，而非VueComponents。

解决方法:

可以通过将的配置项在在created内来实现，如:

created() {    this.gridOption = {        gridManagerName: 'test',        ... // 其它配置项    };}

调用公开方法

通过ES6语法，将GridManagerVue引入, 如果使用this.$gridManager服务需要提前通过Vue.use(GridManagerVue)将GridManagerVue注册至全局组件。

import GridManager, { $gridManager } from 'gridmanager-vue';Vue.use(GridManager);// 刷新GridManager.refreshGrid('test-gm'); // 或 this.$gridManager.refreshGrid('test-gm');// 更新查询条件GridManager.setQuery('test-gm', {name: 'baukh'});  // 或 this.$gridManager.setQuery('test-gm', {name: 'baukh'});// ...其它更多请直接访问API

查看当前版本

import GridManager, {$gridManager} from 'gridmanager-vue';console.log('GridManager Vue的版本=>', GridManager.version);console.log('GridManager 核心库的版本=>', $gridManager.version);