vue+element的跨页全选

el-table跨页全选

在开发的过程中，el-table表格是有全选的需求的，可以使用el-table自带的复选框样式或者是放置一个全选按钮。我使用的是el-table自带的一个全选样式。
有两种方法：第一种是使用el-table自带的方法，实现表格的跨页多选
代码如下：

 <el-table
 	v-if="currentType === 2"
    :data="tableData"
    @selection-change="handleSelectionChange"
    @select="handleTdSelectionChange"
    :row-class-name="tableRowClassName"
  	ref="refTable"
    row-key="id"
>
	<el-table-column
		type="selection"
        min-width="3%"
        class-name="outer-select"
        :reserve-selection="true"
     ></el-table-column>
</el-table>

最主要的就是reserve-selection这个方法，他是仅对type='selection’有效果的，他可以保留数据更新前数据的选中状态，但是需要指定row-key。
第二种方法比较麻烦，是手动写一个复选框，来控制el-table中的选中状态
代码如下：

//这里的checkbox就是el-table中表头的总控制多选的复选框
<el-checkbox
	v-if="currentType === 2"
    :indeterminate="isIndeterminates"
    v-model="checkAlls"
    @change="handleCheckAllChanges"
    style="z-index: 1"
></el-checkbox>
//这里的样式是为了隐藏掉el-table中的头部自带的复选框
//>>> .el-table th.is-leaf.outer-select .el-checkbox__input {
   
//  display: none;
//}
<el-table
	:data="tableData"
	@selection-change="handleSelectionChange"
	@select="handleTdSelectionChange"
	:row-class-name="tableRowClassName"
	ref="refTable"
	row-key="id"
>
<el-table-column
	type="selection"
	min-width="3%"
	class-name="outer-select"
	:reserve-selection="true"
></el-table-column>
</el-table>

<script>
	export default{
   
		data:{
   
			return{
   
				isIndeterminates: false,
				checkAlls: false,
				tableData:[],
				checkedAllButtons:2,
				newTables:[],
				selectTables:[],
				copyTables:[],
				copyTable2s:[],
				checkedAllDatas:[],
				dossierSelectId:[]
			}
		},
		methods: {