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 = [];
        }
posted @ 2021-06-21 14:36  warisFairy  阅读(2498)  评论(0)    收藏  举报