element-ui table跨页全选


element-ui table里的全选功能只会全选当前页的所有数据

当table有分页功能的时候实现跨页全选

  ①为table添加select方法(当用户手动勾选数据行的 Checkbox 时触发的事件)

    两个参数 selection,row 选中的数据   最后一个选中的数据

    定义一个变量用来保存选中的数据 将selection赋值给变量

    checkAdmittance(selection, row) {

      this.selectedList = selection;

       },

  ②为table添加select-all方法(当用户手动勾选全选 Checkbox 时触发的事件)

    this.allCheck为true时

     if (!this.allCheck) {
                   // 全选选中时当前页所有数据选中,使用后台所有数据进行遍历.
      // 把所有数据赋值给当前选中变量,遍历所有数据
                   this.selectedList = this.pointData;
                   this.pointData.forEach((row) => {
                          if (row) {
           //为table添加ref属性 table
                               this.$refs.table.toggleRowSelection(row, true);this.selectedList = [];
                          }
                   });
      this.allCheck = true;
     }else{ 
        this.$refs.table.clearSelection();
                             this.allCheck = false;
        this.selectedList = [];
        }


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM