ag-grid-vue全选反选例子

<!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="allChecked" class="btn">全选</div>
        <div @click="unChecked" class="btn">反选</div>
        <div @click="getRows" class="btn">获取选中数据</div>
        <div @click="delRows" class="btn">删除选中数据</div>
        
        <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(); 
                },
                //设置全选
                allChecked() {
                    this.gridApi.selectAll();
                },
                //设置反选
                unChecked() {
                    this.gridApi.deselectAll();
                },
                //获取选中的数据
                getRows() {
                    var selRows = this.gridApi.getSelectedRows();
                    if (selRows == null || selRows.length <= 0) {
                        alert("您未选中任何数据");
                        return;
                    }
                    alert(JSON.stringify(selRows));
                },
                //删除选中数据
                delRows() {
                    //获取选中的数据
                    var selRows = this.gridApi.getSelectedRows();
                    if (selRows == null || selRows.length <= 0) {
                        alert("您未选中任何数据");
                        return;
                    }
                    //注意调用updateRowData方法并不会更新vue的data
                    // this.gridApi.updateRowData({remove: selRows});
                    //正确的删除方法是这样的
                    this.rowData = this.rowData.filter(item => {
                        return selRows.filter(m => m.title === item.title).length <= 0
                    });
                }
            }
        });
    </script>
</body>
</html>