elementUI多选框反选的实现代码


Posted in Javascript onApril 03, 2019

最近有一个需求,点击添加按钮,弹出窗口(窗口显示多选、可翻页、可检索列表),选中多条信息,当我点击确定按钮,把选中信息显示在页面上;点击取消,选中信息不显示在页面上。再次打开,把在页面上的信息显示选中状态。

思路:一开始选用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中地址、时间等页面显示问题
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之更有效率的字符串替换
Aug 02 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
详解redux异步操作实践
Aug 15 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
vue生命周期的探索
Apr 03 #Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 #Javascript
详释JavaScript执行环境与执行栈
Apr 02 #Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 #Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 #Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 #Javascript
Seajs源码详解分析
Apr 02 #Javascript
You might like
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
详解python3百度指数抓取实例
2016/12/12 Python
python fabric实现远程部署
2017/01/05 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
医药营销个人求职信
2014/04/12 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
会计学专业自荐信
2014/06/25 职场文书
质量主管工作职责
2014/09/26 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python