Element UI实现全选和取消功能

1、点击全选,则选择全部选项框,再点击一下全选,则不选任何选项框,先放一张实现图,如下所示。Element UI实现全选和取消功能

 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来实现全选和反选。

上一篇:PLSQL_性能优化系列02_Oracle Join关联


下一篇:python 学习加载Excel 文件内容笔记(2)