elementUI table 后端分页 + 全选功能， 如何在切换size 和 page 时 保留上次选中的值，且能够回显

<el-table :data="pageData" ref="goodsTable" size="small" v-loading="loading" height="520" @selection-change="handleSelectionChange" row-key="id">
    <el-table-column type="selection" :reserve-selection="true" width="50" prop="id">
    </el-table-column>
    <el-table-column label="编号" prop="goodsCode" width="130">
    </el-table-column>
    <el-table-column label="品名" prop="tradeName" show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="规格" prop="specification" width="150" show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="最小包装" prop="minPack" width="150" show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="状态" prop="saleState" width="100">
        <template scope="scope">
            <el-tag>{{scope.row.saleState | statusFilter}}</el-tag>
        </template>
    </el-table-column>
    <el-table-column label="生产厂家" prop="manufacturer" show-overflow-tooltip>
    </el-table-column>
</el-table>

首先在html中， 结合:reserve-selection="true" 和  row-key="id" 

id 作为唯一标识，在回显的过程中，作为标识确定哪个id 对应的数据 是需要被选中的

:reserve-selection="true" 的意思是在回显的过程中，保留上次选中的数据，不会被刷新，
这样选中的数据保留下来，通过row-key的识别之后，就可以准确的回显。

methods: {
        handleSelectionChange(rows) {
            this.selectedData = [];
            if (rows) {
                rows.forEach(row => {
                    if (row) {
                        this.selectedData.push(row.id);
                    }
                });
            }
        }
    }

在js 中 每次选中之后，将更新的数据的id提出来，因为每次更新是返回所有的选中的数据，所以这里需要清空一次上次保留的数据，

如果遇到下面的情况，这个是因为饿了么组件，在这种情况，没有及时的渲染表格的状态，导致全选按钮的状态显示错误，但是此时的数据是正确的，只是样式没有及时的根据数据的变化进行更新

如何解决这个问题呢？

一行代码就可以了

1. 是在处理逻辑业务完成之后，对列表进行清空操作
this.$refs.goodsTable.clearSelection();

2. 同样，只不过代码，写法不同  直接将选中的值，以这样的方式清空掉
this.$refs.goodsTable.selection.length = 0;