GridManager对Vue很友好，发布了针对于Vue的npm包。
相关地址
安装
`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: ``'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: `<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:() => {`
`// 这里使用到了element ui`
`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 => {`
`// 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请点这里
