Element UI实现全选和取消功能

2021-11-05 14:00:27 阅读：216 来源： 互联网

标签：rows val 代码 Element 全选 UI gsbm gsm

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

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

ICode9

Element UI实现全选和取消功能