vue+el-table分页、滚动全选，加载后仍全选

数据量过大时，滚动加载或者分页都是分次向后端接口请求数据的，点击全选后，再次请求接口还希望新数据默认选中。

这个需求可以有三种：

需求一：以是否点击全选来决定（没有动全选按钮就不改变是否全选状态）

需求二：根据组件自身的全选与否的状态来决定（如果有取消选中的，不管是几条直接判定成没有全选）

需求三：以上两种的结合，点击全选和组件共同决定

解决方案：

需求一：

原理：

1.@select-all捕捉全选/不是全选 的状态。

2.如是全选，则后续加载时 将 新加载的内容，勾选上；

   如果不是，则不默认勾选。

其他非重点属性未显示

html：

<el-table
  :data="dataList"        //数据源
  @select-all="selectAll" //点击全选按钮的钩子函数
  :row-key="getRowKey" //多选需要加的一个属性
  ref="Table"         
  v-el-table-infinite-scroll="scroll"  //可选项，滚动加载
  infinite-scroll-delay="500"  //可选项，滚动加载的防抖
>
<el-table-column
  type="selection"
  :reserve-selection="true" //跨页后前页勾选仍有效
  width="50"
  align="center"
/>
</el-table>

js:

data(){
  return{
   isSelectAll: false,
   dataList:[],
  }
},


methods:{
//全选时
selectAll(selection) {
   this.isSelectAll = !this.isSelectAll;
},


//（滚动）加载数据时
scroll() { 
   getdata(params).then((response) => { //请求数据
     let arr = response.data.list;
        if (this.isSelectAll) {  //如果是全选状态，则将新请求的数据全部勾选上
          arr.forEach((row) => {
            this.$refs.Table.toggleRowSelection(row, true);
          });
        }
        this.dataList = this.dataList.concat(arr);  //可选项，滚动时将新数组拼接
},

}

需求二：

原理：通过ref直接获取组件的全选状态，全选为true,不是全选为false

js

getIsAllChecked() {
   //下面这行为获取table组件中的全选checkbox的勾选状态，$refs是绑定的table的
    this.isSelectAll = this.$refs.Table.store.states.isAllSelected;
 }

需求三：

原理：通过ref和自己设置的isSelect的true和false状态共同判断是否是全选的状态

js

    // 全选时触发的函数
    selectAll() {
      if (this.getIsAllChecked() == true && this.isSelectAll == true) {
    //如果两个都是true时，再次点击不改变全选状态为false
        this.isSelectAll = this.isSelectAll ;
      } else {
        this.isSelectAll = !this.isSelectAll ;
      }
    },

    getIsAllChecked() {
      //下面这行为获取table组件中的全选checkbox的勾选状态
      return this.$refs.Table.store.states.isAllSelected;
    },

如想实现el-table的element组件自带的无限滚动加载，可以参考这个博主的文章：

element-ui 的 el-table 上使用无限滚动加载（与自带的 infinite-scroll 结合）_YuJinpan的博客-CSDN博客