使用elementui表格全选功能总结

项目需求：
表格中添加全选功能，然后还要单独点击的时候进行一个请求，后台判断是否可以选中。点击全选的时候不进行判断是否可以选中，并且有分页切换时要记住上一页选中的数据。
解决方法：
1.单独点击进行校验使用select事件：

 <el-table :data="tableData" style="width: 100%" @selection-change="selectionChange" ref="table" :border="border" @select="selectionRowChange" @select-all="selectAll" :row-key="rowKey">
 //在这里要清楚selection-change事件在多选和全选的时候都会触发，select-all事件是只有在全选的时候会触发。
 // 多选、全选
    selectionChange(val) {
      console.log(val);
    },
    // 手动勾选行内数据
     selectionRowChange(val,row) {
      console.log(val,row);
    },
    //全选触发
    selectAll(val){
      console.log(val);
    },

2.分页记住之前选中的数据使用row-key
如果你的表格是定义的组件那你的row-key不能写死，要定义成一个参数例如：

 <el-table :data="tableData"  ref="table" :row-key="rowKey">
 </el-table>
 //rowKey的定义，这里要注意的是row-key是一个函数
 export default {
  data() {
    return {
    }
  },
  props: {
    rowKey: {
      type: Function,
      default: () => {}
    },
  },
  }
  //在调用这个组件的时候要给rowkey传值：
   <table-content
        ref="listPowerSupplyTab"
        :tableTitle="tableOrgTitle"
         :tableData="orgTableData"
         :rowKey="(val)=>{ return val.orgCode}"
    >
   </table-content>

如果只是单一的一个表格不是一个组件你可以直接写死

  <el-table :data="tableData"  ref="table" row-key="id">
 </el-table>

如果我们在刚开始的时候要默认的是选中状态的时候，可以使用toggleRowSelection()函数：

this.orgTableData.forEach(row => {
          this.$refs.listPowerSupplyTab.$children[0].toggleRowSelection(row);
    })

但是我在这样写的时候遇到一个Bug就是我的表格是在弹框里面的，我要在弹框加载前是获取不到this.$refs.listPowerSupplyTab，经过查找发现：
ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
ref 只有等页面加载完成好之后你才能调用 this.$refs ，如果你使用v-if 、v-for渲染页面的话，那么在刚开始页面没没渲染之前你是拿不到this.$refs 的，所以要等到页面渲染之后拿才可以。
之后查找发现使用this.$nextTick(()=>{ })可以解决。

  this.$nextTick(() => {
       this.orgTableData.forEach(row => {
          this.$refs.listPowerSupplyTab.$children[0].toggleRowSelection(row);
          })
  })

最后实现效果:

点击下面的删除按钮，取消选中状态可以使用toggleRowSelection()函数：

delete(data) {
      this.orgNameList.forEach((item, index) => {
        if (item.orgCode == data.orgCode) {
          this.orgNameList.splice(index, 1);
        }
      });
       //设置false就可以取消选中状态
  this.$refs.listPowerSupplyTab.$children[0].toggleRowSelection(data,false);
    },