ag-grid-vue插入数据例子
查看教程
运行代码
PC模式
平板模式
手机模式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ag-grid-vue插入数据例子</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <script src="https://www.itxst.com/package/vue/vue.min.js"></script> <script src="https://www.itxst.com/package/ag-grid/ag-grid-community.js"></script> <script src="https://www.itxst.com/package/ag-grid-vue/ag-grid-vue.umd.js"></script> <link href="https://www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet" /> <style> .btn { width: 150px; margin-bottom: 10px; border: solid 1px #ddd; padding: 6px; text-align: center; border-radius: 6px; background-color: #eee; display: inline-block; cursor: pointer; } </style> </head> <body style="padding:10px;"> <div id="app"> <div @click="add" class="btn">插入数据</div> <!-- 使用ag-grid-vue组件 其中columnDefs为列，rowData为表格数据 --> <ag-grid-vue style="width: 100%; height: 200px;" class="table ag-theme-balham" :column-defs="columnDefs" :row-data="rowData" @grid-ready="onGridReady"></ag-grid-vue> </div> <script> //注册ag-grid-vue组件 Vue.component('ag-grid-vue', window["ag-grid-vue"].AgGridVue); var app = new Vue({ el: '#app', data() { return { //定义ag-grid列 columnDefs: [ { headerName: '名称', field: 'title', checkboxSelection: true }, { headerName: '网址', field: 'url', width: 200 }, { headerName: '分类', field: 'catalog' }, { headerName: 'PR', field: 'pr' } ], //需要显示的数据 rowData: [ { title: '谷歌', url: 'www.google', catalog: '搜索引擎', pr: 10 }, { title: '微软', url: 'www.microsoft.com', catalog: '操作系', pr: 10 }, { title: 'ITXST', url: 'www.itxst.com', catalog: '小站', pr: 1 }, { title: '淘宝', url: 'www.taobao.com', catalog: '电商', pr: 8 } ] }; }, methods: { //ag-grid创建完成后执行的事件 onGridReady(params) { console.log(params); // 获取gridApi this.gridApi = params.api; this.columnApi = params.columnApi; // 这时就可以通过gridApi调用ag-grid的传统方法了 this.gridApi.sizeColumnsToFit(); }, //插入数据 add() { this.rowData.push({ title: '亚马逊', url: 'www.amazon.com', catalog: '电商', pr: 8 }); } } }); </script> </body> </html>
