控制element-ui table表格的全选与全不选

在项目开发中，表格下面单独写了一个复选框，要用这个复选框的勾选与不勾选来控制表格的全选与全不选状态，需求效果如下：

在官网种找到了toggleAllSelection和clearSelection两种方法实现了效果

代码结构如下：

 主要代码如下：

// grid-table 是表格组件
<grid-table
   ref="grpNickNameTable"
   :col-model="firstGrpNickNameColModel"
   :row-data-api="rowDataApi"
   :after-load="afterLoad"
   :multi-select="true"
   :height="310"
   :show-pager="true"
   @selectionChangeEnd="grpNickNameTableHandleSelectionChange"

<el-form v-if="collectTerminalInformationBtn">
   <el-form-item label-width="3px">
       <el-checkbox v-model="requestVO.isAddAllTerminalStatus" @change="allSelectTerminal">选中所有</el-checkbox>
   </el-form-item>
</el-form>

/**
* 点击<复选框>--根据复选框的选中状态，对表格的全选全不选状态进行处理
* @param e 复选框的选中状态
*/
allSelectTerminal(e) {
  if (e === true) {
    this.$refs.grpNickNameTable.toggleAllSelection()
  } else {
    this.$refs.grpNickNameTable.clearSelection()
   }
}