最近有一個需求，點擊添加按鈕，彈出窗口（窗口顯示多選、可翻頁、可檢索列表），選中多條信息，當我點擊確定按鈕，把選中信息顯示在頁面上；點擊取消，選中信息不顯示在頁面上。再次打開，把在頁面上的信息顯示選中狀態。

思路：一開始選用elementUI官網例子,使用selection-change，但是它只顯示當前改變的選擇，不能滿足我翻頁及檢索后還能選中數據的問題

toggleSelection(rows) {    if (rows) {     rows.forEach(row => {      this.$refs.multipleTable.toggleRowSelection(row);     });    } else {     this.$refs.multipleTable.clearSelection();    }   }

后來查詢api，發現了另外2個api，頁面上的存在本地字段 glht，列表上選中的存在本地字段 yglht.

每次要計算頁面顯示的數據是列表的第幾條數據，直接把對象放里面并不會勾選我上傳選中的數據。

emmm....知道有點蠢，但是我還沒想到別的辦法...

彈框：

<el-dialog class="contract_modal" title="信息" :visible.sync="glht_modal" width="80%" :modal="false" @close="cancel"> <el-form :inline="true" :model="searchData" label-width="90px">  <el-form-item label="名稱：">   <el-input v-model.trim="searchData.mc_" size="small" class="contract_input"></el-input>  </el-form-item>  <span class="list_btns">   <el-button type="primary" size="small" @click="listSearch(page, 1)" class="con_btn">搜索</el-button>   <el-button size="small" @click="searchData = {}" class="con_btn">清空</el-button>  </span> </el-form> <div id="list_body" class="list-body" style="padding-left: 0;">  <el-table :data="tableData" stripe border style="width: 100%" max-height="480" ref="multipleTable" @select-all="handleSelectionAll" @select="handleSelectionChange">   <el-table-column type="selection" width="26" align="right"></el-table-column>   <el-table-column type="index" width="50" label="序號" align="left" header-align="left"></el-table-column>   <el-table-column prop="mc_" label="名稱" width="180" show-overflow-tooltip align="left"></el-table-column>     </el-table>  <div class="list-pagination">   <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"           :current-page.sync="page.page" :page-sizes="[10, 20, 50, 100]":page-size="page.pageCount"           layout="total, sizes, prev, pager, next, jumper, ->"           :total="page.total"></el-pagination>  </div> </div> <div slot="footer" class="dialog-footer">  <el-button type="primary" @click="save" size="small">確定</el-button>  <el-button @click="cancel" size="small">取消</el-button> </div></el-dialog>

methods 里，全選時與選中單個時所做的操作：