elementui table表格后端分页 ，改变pagesize或者改变page扔保持复选框状态

步骤：

1.设置   @selection-change="handleSelection"和:row-key="getRowKeys"

2.设置列的  type="selection"属性

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

 

<!-- 表格 -->

    <el-table

      v-loading="listLoading"

      :data="dataList.records"

      border

      fit

      highlight-current-row

      :header-cell-style="{

        background: '#f2f3f4',

        color: '#555',

        'font-weight': 'bold',

        'line-height': '32px',

      }"

      @selection-change="handleSelection"

      :row-key="getRowKeys"

    >

      <el-table-column

        v-if="options.multi"

        align="center"

        type="selection"

        width="55"

        :reserve-selection="true"

      />

      <slot name="data-columns" />

    </el-table>

 

 methods: {

    getRowKeys(row) {

      //记录每行的key值

      return row.id; //id 自己查看 row 里的数据

    },

    /**

     * 列表多选操作

     * @param val

     */

    handleSelection(val) {

      // console.log(val);

      const ids = [];

      val.forEach((row) => {

        ids.push(row.id);

      });

      this.selectedObjs = val;

      this.selectedIds = ids;

      this.multiShow = ids.length > 0;

      this.selectedLabel = "已选" + ids.length + "项";

　　//发送给父组件

      this.$emit("select-changed", {

        ids: this.selectedIds,

        objs: this.selectedObjs,

      });

    },

}