elementUI多選框反選的實現代碼

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

<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>

// 全選 當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))
},

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();
 }
},

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中地址、時間等頁面顯示問題
}