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中地址、时间等页面显示问题}