GridManager對Vue很友好，發(fā)布了針對于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"``>跟據(jù)相關法規(guī)，該單元格被過濾</span>``
`},{`
`key: ``'createTime'``,`
`text: ``'創(chuàng)建時間'``,`
`},{`
`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``,`
`// 數(shù)據(jù)來源，類型: 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);`
`},`
`// 每頁顯示條數(shù)`
`pageSize: 20`
`// 更多配置請參考GridManager API,`
`};`
查看當前版本
`import GridManager from ``'gridmanager-vue'``;`
`console.log(``'GridManager'``, GridManager.version);`
gridmanager-vue僅是gridmanager的一個vue封裝，api與gridmanager共用。詳細api請點這里
