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 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
express 项目分层实践详解
Dec 10 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 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中strtotime函数使用方法详解
2011/11/27 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python中dict和set的用法讲解
2019/03/28 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
python cookie反爬处理的实现
2020/11/01 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
销售演讲稿范文
2014/01/08 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
文化活动实施方案
2014/03/28 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
药房管理制度范本
2015/08/06 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书