{"id":27528621,"url":"https://github.com/baukh789/gridmanager-vue","last_synced_at":"2025-04-18T16:37:06.315Z","repository":{"id":48984520,"uuid":"130167417","full_name":"baukh789/GridManager-Vue","owner":"baukh789","description":"🌐 快速、灵活的对Table标签进行实例化，让Table标签充满活力。","archived":false,"fork":false,"pushed_at":"2022-06-30T09:36:18.000Z","size":485,"stargazers_count":88,"open_issues_count":2,"forks_count":20,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T00:02:25.855Z","etag":null,"topics":["gridmanager","vue","vue2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/baukh789.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-19T06:13:58.000Z","updated_at":"2025-03-16T11:32:22.000Z","dependencies_parsed_at":"2022-09-05T05:31:30.609Z","dependency_job_id":null,"html_url":"https://github.com/baukh789/GridManager-Vue","commit_stats":null,"previous_names":[],"tags_count":89,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baukh789%2FGridManager-Vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baukh789%2FGridManager-Vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baukh789%2FGridManager-Vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baukh789%2FGridManager-Vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baukh789","download_url":"https://codeload.github.com/baukh789/GridManager-Vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249518256,"owners_count":21284942,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gridmanager","vue","vue2"],"created_at":"2025-04-18T16:37:05.575Z","updated_at":"2025-04-18T16:37:06.308Z","avatar_url":"https://github.com/baukh789.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GridManager Vue[自3.0开始, 该库已与[GridManager](https://github.com/baukh789/GridManager)合并]\n\u003e 基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外，其它API与GridManager API相同。\n\n![image](https://s2.ax1x.com/2019/04/16/AxA4xK.png)\n[![Build Status](https://travis-ci.org/baukh789/GridManager.svg?branch=master\u0026style=flat-square)](https://travis-ci.org/baukh789/GridManager)\n[![npm version](https://img.shields.io/npm/v/gridmanager-vue.svg?style=flat-square)](https://www.npmjs.com/package/gridmanager-vue)\n[![npm downloads](https://img.shields.io/npm/dt/gridmanager-vue.svg?style=flat-square)](https://www.npmjs.com/package/gridmanager-vue)\n[![coverage](https://img.shields.io/codecov/c/github/baukh789/GridManager.svg?style=flat-square)](https://codecov.io/gh/baukh789/GridManager)\n\n## 实现功能\n| 功能 | 描述 |\n| -: | :- |\n| 宽度调整 | 表格的列宽度可进行拖拽式调整 |\n| 位置更换 | 表格的列位置进行拖拽式调整 |\n| 配置列 | 可通过配置对列进行显示隐藏转换 |\n| 表头吸顶 | 在表存在可视区域的情况下,表头将一直存在于顶部 |\n| 列固定 | 指定某列固定在左侧或右侧 |\n| 排序 | 表格单项排序或组合排序 |\n| 分页 | 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能 |\n| 用户偏好记忆 | 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数 |\n| 序号 | 自动生成序号列 |\n| 全选 | 自动生成全选列 |\n| 导出 | 静态数据导出、动态数据导出、已选数据导出 |\n| 打印 | 当前页打印 |\n| 右键菜单 | 常用功能在菜单中可进行快捷操作 |\n| 过滤 | 通过对列进行过滤达到快速搜索效果 |\n| 合并 | 同一列下相同值的单元格可自动合并 |\n| 树表格 | 可通过配置快速实现树型表格结构 |\n| 行移动 | 可通过配置快速实现行位置移动 |\n\n## API\n\u003e 该文档为原生GridManager的文档，vue版本除了在`columnData.text` `columnData.template` `topFullColumn.template`中可以使用vue模版外，其它使用方式相同。\n- [API](http://gridmanager.lovejavascript.com/api/index.html)\n\n## Demo\n\u003e 该示例为原生GridManager的示例，vue版本除了在`columnData.text` `columnData.template` `topFullColumn.template`中可以使用vue模版外，其它使用方式相同。\n- [简单的示例](http://gridmanager.lovejavascript.com/demo/index.html)\n- [复杂的示例](http://develop.lovejavascript.com/node_modules/gridmanager/demo/index.html)\n\n## Core code\n- [GridManager](https://github.com/baukh789/GridManager)\n- [jTool](https://github.com/baukh789/jTool)\n\n## 开发环境\nES2015 + webpack + Vue + GridManager\n\n## 安装\n```\nnpm install gridmanager-vue --save\n```\n\n## 项目中引用\n- es2015引入方式\n```javascript\nimport GridManager from 'gridmanager-vue';\nimport 'gridmanager-vue/css/gm-vue.css';\n```\n\n- 通过script标签引入\n```html\n\u003clink rel=\"stylesheet\" href=\"../node_modules/gridmanager-vue/css/gm-vue.css\"\u003e\n\u003cscript src=\"../node_modules/gridmanager-vue/js/gm-vue.js\"\u003e\u003c/script\u003e\n```\n### Vue全局组件\n```javascript\nimport GridManager from 'gridmanager-vue';\nimport 'gridmanager-vue/css/gm-vue.css';\nVue.use(GridManager);\n```\n\n### Vue局部组件\n```javascript\nimport GridManager from 'gridmanager-vue';\nimport 'gridmanager-vue/css/gm-vue.css';\n\nnew Vue({\n    el: '#app',\n    components: {\n        GridManager\n    }\n});\n```\n\n### 示例\n```html\n\u003cgrid-manager :option=\"gridOption\" :callback=\"callback\" ref=\"grid\"\u003e\u003c/grid-manager\u003e\n```\n\n```javascript\n\nconst app = new Vue({\n    el: '#app',\n    data: {\n        // 表格渲染回调函数\n        // query为gmOptions中配置的query\n        callback: function(query) {\n            console.log('callback =\u003e ', query);\n        },\n\n        // 表格\n        gridOption = {\n            // 表格唯一标识\n            gridManagerName: 'test-gm',\n\n            // 高度\n            height: '300px',\n\n            // 首次是否加载\n            firstLoading: false,\n\n            // 列配置\n            columnData: [\n                {\n                    key: 'shopId',\n                    width: '180px',\n                    text: '店铺id',\n                    align: 'center'\n                },{\n                    key: 'platId',\n                    text: '平台',\n\n                    // template=\u003e function: return dom\n                    // 参数介绍\n                    // platId: 当前行数据中与配置项key相同字段的值\n                    // row: 当前行数据\n                    // index: 当前行所在数据中的索引值\n                    template: (platId, row, index) =\u003e {\n                        const span = document.createElement('span');\n                        span.style.color = 'blue';\n                        span.innerText = platId;\n                        return span;\n                    }\n                },{\n                    key: 'platNick',\n                    text: '店铺名称',\n\n                    // template=\u003e string dom\n                    template: `\u003cspan style=\"color: red\"\u003e跟据相关法规，该单元格被过滤\u003c/span\u003e`\n                },{\n                    key: 'createTime',\n                    text: '创建时间',\n                },{\n                    key: 'updateTime',\n                    text: '更新时间',\n\n                    // 表头筛选条件, 该值由用户操作后会将选中的值以{key: value}的形式覆盖至query参数内。非必设项\n                    filter: {\n                        // 筛选条件列表, 数组对象。格式: [{value: '1', text: 'HTML/CSS'}],在使用filter时该参数为必设项。\n                        option: [\n                            {value: '1', text: 'HTML/CSS'},\n                            {value: '2', text: 'nodeJS'},\n                            {value: '3', text: 'javaScript'},\n                            {value: '4', text: '前端鸡汤'},\n                            {value: '5', text: 'PM Coffee'},\n                            {value: '6', text: '前端框架'},\n                            {value: '7', text: '前端相关'}\n                        ],\n                        // 筛选选中项，字符串, 默认为''。 非必设项，选中的过滤条件将会覆盖query\n                        selected: '3',\n                        // 否为多选, 布尔值, 默认为false。非必设项\n                        isMultiple: false\n                    },\n                    // template=\u003e function: return string dom\n                    template: updateTime =\u003e {\n                        return `\u003cspan style=\"color: blue\"\u003e${updateTime}\u003c/span\u003e`;\n                    }\n                },{\n                    key: 'action',\n                    text: '操作',\n                    width: '100px',\n                    align: 'center',\n\n                    // template=\u003e function: return vue template\n                    // vue模版中将自动添加row字段，该字段为当前行所使用的数据\n                    // vue模版将不允许再使用template函数中传入的参数\n                    template:() =\u003e {\n                        return '\u003cel-button size=\"mini\" type=\"danger\" @click=\"delRelation(row)\"\u003e解除绑定\u003c/el-button\u003e';\n                    }\n                }\n            ],\n            // 使用分页\n            supportAjaxPage: true,\n\n            // 数据来源，类型: string url || data || function return[promise || string url || data]\n            ajaxData: (settings, params) =\u003e {\n                return tenantRelateShop(params);\n            },\n\n            // 请求失败后事件\n            ajaxError: err =\u003e {\n                console.log(err);\n            },\n\n            // checkbox选择事件\n            checkedAfter: rowList =\u003e {\n                this.selectedCheck(rowList);\n            },\n\n            // 每页显示条数\n            pageSize: 20\n\n            // ...更多配置请参考API\n        }\n    },\n    methods: {\n        // 解除绑定\n        delRelation: function(row) {\n            // ... 解除绑定操作\n        }\n    }\n});\n```\n\n### 关于配置项中的this指向\n#### 可能引起this指向错误的方式:\n- 表格配置项在data中配置时，配置项内所包含的函数this指向并不是VueComponents。\n- 使用Class声明方式时，配置项内所包含的函数this指向为class，而非VueComponents。\n\n#### 解决方法:\n可以通过将的配置项在在created内来实现，如:\n```\ncreated() {\n    this.gridOption = {\n        gridManagerName: 'test',\n        ... // 其它配置项\n    };\n}\n```\n\n### 调用公开方法\n\u003e 通过ES6语法，将GridManagerVue引入, 如果使用`this.$gridManager`服务需要提前通过`Vue.use(GridManagerVue)`将`GridManagerVue`注册至全局组件。\n\n```javascript\nimport GridManager, { $gridManager } from 'gridmanager-vue';\nVue.use(GridManager);\n// 刷新\nGridManager.refreshGrid('test-gm'); // 或 this.$gridManager.refreshGrid('test-gm');\n\n// 更新查询条件\nGridManager.setQuery('test-gm', {name: 'baukh'});  // 或 this.$gridManager.setQuery('test-gm', {name: 'baukh'});\n\n// ...其它更多请直接访问API\n```\n\n### 查看当前版本\n\n```javascript\nimport GridManager, {$gridManager} from 'gridmanager-vue';\nconsole.log('GridManager Vue的版本=\u003e', GridManager.version);\nconsole.log('GridManager 核心库的版本=\u003e', $gridManager.version);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaukh789%2Fgridmanager-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaukh789%2Fgridmanager-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaukh789%2Fgridmanager-vue/lists"}