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来控制显示隐藏

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

3、table组件：

4、index页面

不另外多说了，代码里面的注释都说得很明白了。
这里有一问题，当时我一开始写的时候，数据都是用数组的形式，但是当时在点击取消的时候，还是会将我后面选中的数据push给父组件，就因为这个问题搞了好久好久，一直没搞明白是我的问题还是咋滴，后来改成用对象形式就没问题了，现在也恢复不了当时的情况，成了一个迷…

最后提供demo源码 https://github.com/waikam/vue-elementuiTable