Vue框架内使用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"``>`

`// 表格配置项`

`gridOption = {`

`// 表格唯一标识`

`gridManagerName: ``'test-gm'``,`

`// 高度`

`height: ``'300px'``,`

`// 首次是否加载`

`firstLoading: ``false``,`

`// 列配置`

`columnData: [`

`{`

`key: ``'name'``,`

`width: ``'180px'``,`

`text: ``'名称'``,`

`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: `跟据相关法规，该单元格被过滤``

`},{`

`key: ``'createTime'``,`

`text: ``'创建时间'``,`

`},{`

`key: ``'updateTime'``,`

`text: ``'更新时间'``,`

`// function: return string dom`

`template: updateTime => {`

`return` ``${updateTime}`;`

`}`

`},{`

`key: ``'action'``,`

`text: ``'操作'``,`

`width: ``'100px'``,`

`align: ``'center'``,`

`useCompile: ``true``,`

`// function: return vue template, 同时必需配置useCompile=true`

`template:() => {`

`// 这里使用到了element ui`

`return` `'解除绑定'``;`

`}`

`}`

`],`

`// 使用分页`

`supportAjaxPage: ``true``,`

`// 数据来源，类型: string url || data || function return[promise || string url || data]`

`ajax_data: settings => {`

`// tenantRelateShop 这个方法返回了一个promise`

`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请点这里