摘要:基于的封装用于便捷的在中使用除过特性外,其它与相同。非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。非必设项,选中的过滤条件将会覆盖否为多选布尔值默认为。刷新更新查询条件其它更多请直接访问查看当前版本
GridManager Vue
基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外,其它API与GridManager API相同。API
该文档为GridManager的文档,除了columnData中存在差异外,其它使用方式相同。
API
Demo带搜索的表格
Core codeGridManager
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 } });示例
// 表格 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: `跟据相关法规,该单元格被过滤` },{ 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 `${updateTime}`; } },{ 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 "调用公开方法解除绑定 "; } } ], // 使用分页 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);
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/108153.html
摘要:此页面是实现树表格的关健页面。这里就是关健点,因为这个子组件是需要递归实现,所以,需要动态注册到当前组件中。补充一点不要只看部分,部分才是这个树表格的关健所在。 基于vue.js实现树形表格的封装(vue-tree-table) 前言 由于公司产品(基于vue.js)需要,要实现一个树形表格的功能,百度、google找了一通,并没有发现很靠谱的,也不是很灵活。所以就用vue自己撸了一个...
摘要:基于的封装用于便捷的在中使用除过特性外,其它与相同。非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。并且使用服务需要提前通过将注册至全局组件。刷新或更新查询条件或其它更多请直接访问查看当前版本 GridManager Vue 基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外,其它API与GridManag...
摘要:容器里面包含部分,其一为提供过滤器的入口其二为表格组件。数据绑定,简写形式为在父组件和子组件的通讯中,必须要在子组件里面声明。如果是编写则必须是注册组件的语法糖。下次还是上动图吧以后基本上碰到这种使用表格呈现数据的组件。 在项目当中,经常会有表格组件,包含2部分,其一为table-header,其二为table-content 然后在这个小demo里面涉及到了vue的个别指令: v-f...
摘要:是一套基于和的表格组件。将的功能进行了封装,并增加了表格的增删改查数据校验表格内编辑等常用的功能。大部分功能可由配置实现,在实现并扩展了表格组件功能的同时,降低了开发难度,减少了代码量,大大简化了开发流程。 D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格组件。D2-Crud 将 Element 的功能进行了封装,并增加了表格的增删改...
摘要:在做业务组件的时候需要自己自己封装一个通用的表格,这个表格需要符合我们一切的好的幻想,左右固定,表头固定,分页,选择,一直表格内容的行数限制等等,下面就为大家介绍一下这一款表格组件功能以及怎么使用。 在做业务组件的时候需要自己自己封装一个通用的表格,这个表格需要符合我们一切的好的幻想,左右固定,表头固定,分页,选择,一直表格内容的行数限制等等,下面就为大家介绍一下这一款表格组件功能以及...
阅读 1789·2019-08-30 15:53
阅读 3097·2019-08-30 15:44
阅读 2756·2019-08-26 13:31
阅读 1927·2019-08-26 12:10
阅读 754·2019-08-26 11:01
阅读 2067·2019-08-23 15:32
阅读 1522·2019-08-23 13:43
阅读 2501·2019-08-23 11:58