需求：在不同的页面选择项时，选择的结果能保存起来，多个页面的选项都能被选到。
问题：当我选了第一页的一条数据时，点到第二页，数据就刷新了，第一页选的选项也就没有保存了，所以就只能永远选择一页内的数据。
<el-table ref="multipleTable" v-loading="listLoading" :data="list" tooltip-effect="dark" border fit highlight-current-row style="width: 100%;" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column :label="$t('question.ID')" align="center" width="100">
<template slot-scope="scope">
<span>{{ scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('question.stem')" align="center" min-width="100px" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ scope.row.stem }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('question.type')" align="center" width="100" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ scope.row.question_type }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('question.point')" align="center" width="100" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ scope.row.point }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('question.tags')" align="center" width="100" :show-overflow-tooltip="true">
<template slot-scope="{row}">
<span>{{ row.tags }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('question.complexity')" align="center" width="80">
<template slot-scope="scope">
<span>{{ scope.row.complexity }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('question.user')" align="center" width="100">
<template slot-scope="scope">
<span>{{ scope.row.username }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('question.update_user')" align="center" width="160">
<template slot-scope="scope">
<span>{{ scope.row.update_username }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('question.status')" align="center" width="100">
<template slot-scope="{row}">
<el-tag :type="row.status">
{{ row.status }}
</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('question.score')" align="center" width="100">
<template slot-scope="{row}">
<template v-if="row.edit">
<el-input v-model="row.score" class="edit-input" size="small" />
<el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(row)">
cancel
</el-button>
</template>
<span v-else>{{ row.score }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="Actions" width="120">
<template slot-scope="{row}">
<el-button v-if="row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(row)">
Ok
</el-button>
<el-button v-else type="primary" size="small" icon="el-icon-edit" @click="row.edit=!row.edit">
修改分数
</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
解决方案：
用 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。
详情请看文档 https://element.eleme.cn/#/zh-CN/component/table
而且我们不要忘记在methods里写一段方法
methods: {
getRowKeys(row){
return row.id;
},
最后的最后千万不要忘记可能你会出现类似的错误：
image.png
你的return 初始化的时候，list是什么类型呢？一定要记住啊！！！ ===========不能为null 了
return {
list: null,
total: 0,
listLoading: false,
listQuery: {
page: 1,
limit: 20,
question_type: 0,
},
}
请用你的双手将它改为[],谢谢！！！万不要再踏入我的歧途啊！！
return {
list: [],
total: 0,
listLoading: false,
listQuery: {
page: 1,
limit: 20,
question_type: 0,
},
}
最后奉献成功的一张图
image.png
网友评论