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

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

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

        <div class="autoSizeDiv">
          <el-row>
            <el-col :span="24" style="border: 1px solid #dfe6ec;">
              <ag-grid-vue
                      style="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-button
                  type="primary"
                  @click="SelectAll()"
                  class="el-button el-button--primary el-button--mini"
          >全 选</el-button>
          <el-button
                  type="primary"
                  @click="DeselectAll()"
                  class="el-button el-button--primary el-button--mini"
          >反 选</el-button>
          <el-button
                  type="primary"
                  @click="GetRows()"
                  class="el-button el-button--primary el-button--mini"
          >获取选中数据</el-button>
          <el-button
                  type="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-button
                  type="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) {
        // 获取gridApi
        this.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更加方便和简单。

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

标签：vue,ag,selRows,反选,params,gsbm,gridApi3,gsm
来源： https://blog.csdn.net/taibaishenlong/article/details/121165012