需求：在不同的頁(yè)面選擇項(xiàng)時(shí)杆融，選擇的結(jié)果能保存起來(lái)，多個(gè)頁(yè)面的選項(xiàng)都能被選到霜运。
問(wèn)題：當(dāng)我選了第一頁(yè)的一條數(shù)據(jù)時(shí)脾歇，點(diǎn)到第二頁(yè)蒋腮，數(shù)據(jù)就刷新了，第一頁(yè)選的選項(xiàng)也就沒(méi)有保存了藕各，所以就只能永遠(yuǎn)選擇一頁(yè)內(nèi)的數(shù)據(jù)池摧。
<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">
修改分?jǐn)?shù)
</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 里這個(gè)參數(shù)：
（1）reserve-selection -->僅對(duì) type=selection 的列有效，類(lèi)型為 Boolean激况，為 true 則會(huì)在數(shù)據(jù)更新之后保留之前選中的數(shù)據(jù)（需指定 row-key）
（2）配合row-key -->行數(shù)據(jù)的 Key作彤，用來(lái)優(yōu)化 Table 的渲染；在使用 reserve-selection 功能的情況下乌逐，該屬性是必填的竭讳。類(lèi)型為 String 時(shí)，支持多層訪問(wèn)：user.info.id浙踢，但不支持 user.info[0].id绢慢，此種情況請(qǐng)使用 Function。
詳情請(qǐng)看文檔 https://element.eleme.cn/#/zh-CN/component/table
而且我們不要忘記在methods里寫(xiě)一段方法
methods: {
getRowKeys(row){
return row.id;
},
最后的最后千萬(wàn)不要忘記可能你會(huì)出現(xiàn)類(lèi)似的錯(cuò)誤：
你的return 初始化的時(shí)候成黄，list是什么類(lèi)型呢呐芥？一定要記住啊７芩辍Ｋ嘉痢！ ===========不能為null 了
return {
list: null,
total: 0,
listLoading: false,
listQuery: {
page: 1,
limit: 20,
question_type: 0,
},
}
請(qǐng)用你的雙手將它改為[],謝謝Ｎ帕妗１豕ァ！萬(wàn)不要再踏入我的歧途袄逗病９馊啤！
return {
list: [],
total: 0,
listLoading: false,
listQuery: {
page: 1,
limit: 20,
question_type: 0,
},
}
最后奉獻(xiàn)成功的一張圖
