el-table实现分页切换后还能继续保持之前的勾选状态

 

 

 

 <el-table
      ref="tableRef"
      :height="height"
      v-loading="tableConfig.isLoading"
      :data="tableData"
      :row-key="handleRowKey"
      @selection-change="handleSelectionChange" 
    >
       <el-table-column :reserve-selection="true" type="selection" />
        <el-table-column
          type="index"
          :index="indexMethod"
          fixed="left"
        />
</el-table>

data() {
    return: {    
        ids: []
    }
}

porps: {
    idName: {
      type: String,
      default: "id",
    }, // 表格行的唯一标识,默认是 id
}


methods: {
    /**
     * @Event 方法
     * @description: 切换分页时，保持选中状态的标识
     * */
    handleRowKey(row) {
       return row[this.idName]
    },


   /**
   * @Event 方法
   * @description: 监听多选操作
   * */
    handleSelectionChange(selection) {
       this.ids = selection.map((item) => item[this.idName])
    },


    /**
     * @Event 方法
     * @description: 设置表格后一页的index在前一页的index基础上累加
     * @params: pageSize pageNum 
     * */
    indexMethod(index) {
      // return index + 1 // 如果不想要累加效果，请打开此项
      return (
        index +
        this.paginationConfig.pageSize * (this.paginationConfig.pageNum - 1) +
        1
      );
    },

}