vuejs+elementui实现表格翻页保持勾选状态

前几天要做一个功能就是表格翻页保持勾选状态的，然后我用的是vuejs 和 elementui框架，当时琢磨了好久，但是到最后做出来发现，其实还是挺简单的，现在记录一下，方便以后查阅。
首先是点击按钮的时候弹出弹框，然后里面是一个table，然后当选中数据之后，点击确定的话，就将选中的数据传回父组件，如果点击取消的话，就不勾选。

1.A页面的按钮，点击按钮会弹出弹框

2.弹出dialog组件，dialog组件里面的table也做成了一个组件称table组件，勾选要要选的数据，翻页后也保存勾选状态

3.当点击dialog组件的确定按钮之后，将勾选的数据传给A页面，如果点击取消就不影响原来的数据

我这个模块是将弹窗做成一个组件(dialog组件)，然后dialog组件里面的内容也是一个组件(page组件)，在page组件里面的table也是一个组件(table组件)，所以当我点击table组件的复选框之后要将数据传给page组件，然后点击了确定之后才将最终的数据传递给A页面的。

ps:因为原本的需求是弹框内会有很多内容且其他页面会复用，所以弹框里面的内容也做成一个组件，但是这里只是一个简单的demo，所以就只是展示了一个table而已。实际可以直接将table组件放在dialog组件里面就好了。

ok，交代清楚，开始撸代码：

1、弹框组件：my-dialog.vue，通过父组件传递的showDialogState来控制显示隐藏

<template>
  <div>
    <el-dialog
      title="选择资源"
      width="80%"
      :visible.sync="showDialogState"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <slot></slot>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    showDialogState: { type: Boolean, default: false } // 父组件传递用于控制弹框显示隐藏
  }
}
</script>

2、page组件：获取表格数据就用自己的接口吧，然后将获取到的表格数据传递给table组件

<template>
  <div>
    <myTable
      :tab