选中 第一页的一条数据时,点到第二页,数据就刷新了,第一页选的选项也就没有保存了,所以就只能永远选择一页内的数据,为了解决该问题,实现保存之前勾选的记录,需要配置如下:

<el-table

    ref="multipleTable1"

    :data="tableData4"

    tooltip-effect="dark"

    style="width: 100%;cursor: pointer;"

    :row-key="getRowKeys"

    @selection-change="handleSelectionChange1"

    @row-click="clickRow1">

        <el-table-column

            type="selection"

            width="55"

            :reserve-selection="true">

        </el-table-column>

</el-table>

<div style="display: inline-flex;flex-direction: row;justify-content: flex-end;width: 100%;">

<el-pagination

    @size-change="handleSizeChangeTask"

    @current-change="handleCurrentChangeTask"

    :current-page="pageTask"

    :page-sizes="[5, 10, 15, 20]"

    :page-size="pageSizeTask"

    :total=totalTask>

    </el-pagination>

</div>

Tips:

用 element-ui table 里这个参数:
(1)reserve-selection -->仅对 type=selection 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据(需指定 row-key

(2)配合row-key -->行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能的情况下,该属性是必填的。类型为 String 时,支持多层访问:user.info.id,但不支持 user.info[0].id,此种情况请使用 Function

data(){

    return{

        // 获取row的key值,其中row.id为每行记录的唯一标识

        getRowKeys(row) {

            return row.id

        }

    }

}

09-07 17:33