自定义按钮实现表格数据全选

对于表格数据，element UI 进行了非常好的支持。

如果要实现表格数据前有多选框，可以点击头部的全选框来实现多选，可以像上图，新增一列，设置类型为selection（图中标4），如果想设置某一条数据不可选，selectable绑定一个事件（图中标5），方法返回是否可选（true/false），如下图：

在勾选表格数据的时候，会触发@selection-change所绑定的方法（图1中标2），可以在该方法中获取勾选项的id列表，如图：

在实际运营中可能出现各种情况，比如运营人员提出不要表格顶部的标题行，这时只需要设置表格的show-header为false即可（图1中标3）。但是这样就没办法全选了，那就在其他地方增加一个按钮，点击会全选，再次点击会取消全选。代码截图如下：

初始化一个变量selectAllFlag，记录是否全选，默认false，点击全选按钮时，判断全选标识，若为false，说明操作需要全选数据，循环表格数据，取id赋值给selectedRows,这样选中的数据是有了，但是表格前面的选择框没有显示勾中状态，这时就需要调用表格的toggleRowSelection方法。首先获取表格绑定对象（图1中标1），接下来就如下图。

后端转战前端的小小菜鸟，代码不优美，仅供看客参考，欢迎提出意见建议。