Element UI实现全选和取消功能

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

 2、Element UI下的el-table构建表格，属于html表现层部分，其代码如下所示:

<template>
    <div>
        <el-table  ref="multipleTable" :data="tableData" border style="width: 80%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="120px" align="center"></el-table-column>
          <el-table-column prop="gsbm" label="公司编码" align="center" ></el-table-column>
          <el-table-column prop="gsm" label="公司名" align="center"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button
                  type="primary"
                  @click="SelectAll(tableData)"
                  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>
    <div>
</template>

3、js部分，进行数据及方法的处理，代码如下所示：

<script>
    export default {

        data() {
          return {
                tableData: [
                  {gsbm:"QP",gsm:"阿里巴巴"},
                  {gsbm:"QK",gsm:"腾讯"},
                  {gsbm:"QG",gsm:"华为"},
                  {gsbm:"QF",gsm:"小米"},
                  {gsbm:"QP",gsm:"中国银行"},
                ],//批量数据
                multipleSelection: [],//批量多选
            }
        },
        methods:{
             //多选后数据变化
              handleSelectionChange(val){
                console.log("val  ::::"+JSON.stringify(val));
                this.multipleSelection = val;
              },
              //全选按钮
              SelectAll(rows){
                console.log("rows : "+JSON.stringify(rows));
                if(rows){
                  rows.forEach(row =>{
                    this.$refs.multipleTable.toggleRowSelection(row);
                  });
                }else{
                    this.$refs.multipleTable.clearSelection();//清除全选
                }
              },

        }
    }

</script>

 以上代码可以简单实现全选和反选的功能，都放在全选这一个按钮上了，如果有需要，大家可以将代码拆分一下，分别用全选和反选来做，也可以。

路漫漫其修远兮，吾将上下而求索，希望此篇文章对大家有所帮助，但使用el-table方式来构建表格存在一些问题，当数据比较多时，没有右侧的滚动条和底部的滚动条，鉴于此，可以参考另一篇文章，ag-grid来实现全选和反选。

标签：rows,val,代码,Element,全选,UI,gsbm,gsm
来源： https://blog.csdn.net/taibaishenlong/article/details/121160071