ag-grid-vue实现全选反选及其他功能

1、点击全选，则选择全部选项框，再点击一下反选，则不选任何选项框，先放一张实现图，如下所示：

2、html代码部分，如下所示：

<div class="autoSizeDiv"><el-row><el-col :span="24" style="border: 1px solid #dfe6ec;"><ag-grid-vuestyle="width: 99.9%; height: calc(100vh - 250px);"class="ag-theme-balham"id="myGrid":columnDefs="columnDefGss":rowData="rowDataGs":enableSorting="true":enableFilter="true":enableColResize="true":rowSelection="rowSelection":suppressCellSelection="true"@grid-ready="onGridReady2"></ag-grid-vue></el-col></el-row></div><div slot="footer" class="dialog-footer"><el-buttontype="primary"@click="SelectAll()"class="el-button el-button--primary el-button--mini">全 选</el-button><el-buttontype="primary"@click="DeselectAll()"class="el-button el-button--primary el-button--mini">反 选</el-button><el-buttontype="primary"@click="GetRows()"class="el-button el-button--primary el-button--mini">获取选中数据</el-button><el-buttontype="primary"@click="DelRows()"class="el-button el-button--primary el-button--mini">删除选中数据</el-button><el-button@click="AddShowDialog = false"class="el-button el-button--primary el-button--mini">取 消</el-button><el-buttontype="primary"@click="AddGs()"class="el-button el-button--primary el-button--mini">确 定</el-button></div>

3、js部分

<script>export default {name: "course-list",components: { AgGridVue },data() {return {gridApi3: null,columnApi3: null,rowDataGs: [{gsbm:"QP",gsm:"阿里巴巴"},{gsbm:"QK",gsm:"腾讯"},{gsbm:"QG",gsm:"华为"},{gsbm:"QF",gsm:"小米"},{gsbm:"QP",gsm:"中国银行"},],//批量数据multipleSelection: [],//批量多选//合资公司下的公司columnDefGss: [{headerName: '',checkboxSelection:true,headerCheckboxSelection: true,width: 100,pinned: 'left',},{headerName: "公司编码",width: 320,cellStyle: { "text-align": "center" },field: "gsbm",valueFormatter: function (params) {return numberFormatter(params, 2, self.scale);},},{headerName: "公司名",width: 320,cellStyle: { "text-align": "center" },field: "gsm",valueFormatter: function (params) {return numberFormatter(params, 2, self.scale);},},]};},methods: {onGridReady2(params) {// 获取gridApithis.gridApi3 = params.api;this.columnApi3 = params.columnApi;console.log("grid :"+ this.gridApi3);console.log("columnApi : "+this.columnApi3);// 调整表格列宽大小自适应//this.gridApi.sizeColumnsToFit();},//全选按钮SelectAll(){this.gridApi3.selectAll();},//反选DeselectAll(){this.gridApi3.deselectAll();},//获取选中数据GetRows(){let selRows = this.gridApi3.getSelectedRows();if(selRows ==null ||selRows.length<=0){alert("尚未选中任何数据");return;}alert("选中的数据 :"+JSON.stringify(selRows));},//删除选中数据DelRows(){let selRows = this.gridApi3.getSelectedRows();if(selRows ==null ||selRows.length<=0){alert("尚未选中任何数据");return;}this.rowDataGs = this.rowDataGs.filter(item =>{return selRows.filter(m =>m.gsm===item.gsm).length<=0;});}},};</script>

4、通过上述代码可以实现全选、反选、获取选中的数据、删除选中数据、取消弹窗功能。

可以看到当数据比较多时该表格带有右侧滚动条，当数据字段比较多时，带有下方滚动条，相比el-table更加方便和简单。

路漫漫其修远兮，吾将上下而求索，希望此篇文章对大家有所帮助......