标签：vue ag selRows 反选 params gsbm gridApi3 gsm

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。