需求：在不同的页面选择项时，选择的结果能保存起来，多个页面的选项都能被选到。

问题：当我选了第一页的一条数据时，点到第二页，数据就刷新了，第一页选的选项也就没有保存了，所以就只能永远选择一页内的数据。

<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