elementUI多選框反選的思路

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

思路：一開始選用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 裏，全選時與選中單個時所作的操做：

// 全選   當val有數據，即爲全選；爲空數組，即爲取消全選
handleSelectionAll (val) {
  // 獲取全部選中的數據  
  this.records = JSON.parse(localStorage.getItem('glht'))
  if(val.length !== 0) {   
    //全選
    // this.records = Array.from(new Set(val.concat(this.records)))   發現去重很差用！只能手動push了
    // 全選選中的必定是本頁全部數據，因此循環本頁
    this.tableData.forEach((v) => {
      if(this.records.find((e,index) => { return v.id_ === e.id_})){}else {
        // 若是數組中沒有就把選中的push進去
        this.records.push(v)
      }
    })
  } else {     
    // 取消全選，在選中的全部信息中把本頁列表有的刪除
    this.tableData.forEach((v) => {
      this.records.forEach((e,index) => {
        if (e.id_ === v.id_) {
          this.records.splice(index, 1)
        }
      })
    })
  }
  // 每次選的數據暫時存一下
  localStorage.setItem('glht', JSON.stringify(this.records))
},
// 單選  
handleSelectionChange(val, row) {
  // 獲取全部選中的數據  
  this.records = JSON.parse(localStorage.getItem('glht'))
  if (this.records.length === 0) {
    // 尚未選中任何數據
    this.records = [row]
  } else {
    if (this.records.filter(i => { return i.id_ === row.id_ }).length === 0) {
       // 已選中的數據裏沒有本條(取消)，把這條加進來
      this.records.push(row)
    } else {
        // 已選中的數據裏有本條(取消選中)，把這條刪除
      this.records.forEach((e,index) => {
        if (e.id_ === row.id_) {
          this.records.splice(index, 1)
        }
      })
    }
  }
  // 每次選的數據暫時存一下
  localStorage.setItem('glht', JSON.stringify(this.records))
},

methods 裏，獲取彈出框列表與選中數據：

listGet() {
    this.$axios.post("interface", {}, { params: searchData }).then(res => {
      if (res.data.success) {
        this.tableData = res.data.data.rows;
        this.page.total = res.data.data.total;
        this.records = JSON.parse(localStorage.getItem('yglht'))
        this.toggleSelection(JSON.parse(localStorage.getItem('yglht')));   // 反選操做
      } else {
        this.$message.error(res.data.message)
      }
    })
  .catch(err => console.log(err));
},
// 反選處理
toggleSelection(rows) {
  let arr =[]
  this.tableData.forEach((e, index) => {
    rows.forEach((i, ind) => {
      if (e.id_ === i.id_) {
         arr.push(this.tableData[index])
      }
    })
  })
  if (arr) {
    this.$nextTick(() => {
      arr.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row);
      });
    })
  } else {
    this.$refs.multipleTable.clearSelection();
  }
},



  methods 裏

，保存與取消單個時所作的操做：

save () {
  this.glht_modal = false
  localStorage.setItem('yglht', localStorage.getItem('glht'))
  this.yglht()
},
cancel () {
  this.glht_modal = false
  // 取消時  取在頁面上的值
  localStorage.setItem('glht', localStorage.getItem('yglht'))
  // this.toggleSelection(JSON.parse(localStorage.getItem('yglht')));   直接寫很差用
  this.listGet({})   // 獲取彈出框列表數據，這裏調用一次是由於防止再次打開彈出框閃現以前選擇的內容
  this.yglht()
},
yglht() {
    this.list = JSON.parse(localStorage.getItem('yglht'))
    // 處理this.list中地址、時間等頁面顯示問題
}