ag-grid vue umd浏览器直接引入js版用法

上一篇讲解了ag-grid vue在vscode和webpack环境中的用法，那么本篇将介绍ag-grid vue umd浏览器直接引入js版用法，需要注意的是注册注册ag-grid-vue组件，注册成功了用法就和webpack差不多了。

引用JS文件

<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" />

相关文件下载

下载ag-grid-community文件
下载ag-grid-vue文件

代码例子

<div id="app">
    <!-- 使用ag-grid-vue组件 其中columnDefs为列，rowData为表格数据 -->
    <ag-grid-vue style="width: 80%; height: 200px;"
                    class="table ag-theme-balham"
                    :column-defs="columnDefs"
                    :row-data="rowData"
                    :grid-ready="onGridReady"
                    @cell-clicked="onCellClicked"></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();
            },
            //单元格点击事件
            onCellClicked(cell) {
                console.log(cell);
                // 获取选中单元格所在行号
                console.log(cell.rowIndex);
                // 获取选中单元格所在行的数据
                console.log(cell.data);
            }
        }
    });
</script>

在线试一试