element跨分页操作选择详解


Posted in Javascript onJune 29, 2020

本文实例为大家分享了element跨分页操作选择的具体代码,供大家参考,具体内容如下

业务需求:在批量导出或者批量删除的时候会涉及到跨分页导出或者批量删除,这是你会发现,当你选择后点击分页,发现之前选择的数据已经没有了,现在就是要满足分页点击分页后原始数据保留

<template>
  <div>
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%;"
      header-align="left"
      border
      ref="table"
      row-key="serviceDateId"
      @selection-change="handleSelectionChange"
      @row-dblclick="toDetail"
      @sort-change="sortChange"
    >
    <el-table-column type="selection" el-table-column width="50" fixed="left"></el-table-column>
    <el-table-column label="序号" width="80" fixed="left">
      <template slot-scope="{row,$index}">
        <span>{{$index + 1}}</span>
      </template>
    </el-table-column>
    <el-table-column label="服务日期" prop="serviceDate" sortable="custom" min-width="120" ></el-table-column>
    <el-table-column label="服务对象" prop="vsoName" min-width="120"></el-table-column>
    <el-table-column label="身份证号" prop="idCard" sortable="custom" min-width="200"></el-table-column>
    <el-table-column label="服务内容" prop="serviceContentName" min-width="200"></el-table-column>
    <el-table-column label="服务结果" prop="serviceResultName" min-width="100"></el-table-column>
    <el-table-column label="志愿者" prop="volunteerName" sortable="custom" min-width="120" show-overflow-tooltip></el-table-column>
    <el-table-column label="志愿者所属组织" prop="objName" min-width="200" show-overflow-tooltip></el-table-column>
    <el-table-column fixed="right" label="操作" width="150" header-align="center">
      <template slot-scope="{row,$index}">
        <span @click="handleEdit(row)" class="table-btn" v-has="{class: '编辑'}">编辑</span>
        <span @click="handleRemove($index, row)" class="table-btn"
          v-has="{class: '删除'}">删除</span>
      </template>
    </el-table-column>
  </el-table>
  <pagination
    v-show="total>0"
    :total="total"
    :page.sync="form.pageNum"
    :limit.sync="form.pageSize"
    @pagination="getData(form)"
  />
  </div>
</template>
<script>
export default {
  data(){
    return{
      ruleForm: {
        username: '',
        password:''
      },
      form: {
        pageNum: 1, // 分页页数
        pageSize: 10, // 分页数量
      },
      multipleSelection: [], //多选的行数据
      multipleSelectionAll:[],// 当前页选中的数据
      idKey: 'idCard',
    }
  },
  methods: {
   setSelectRow() {
      if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
        return;
      }
      // 标识当前行的唯一键的名称
      let idKey = this.idKey;
      let selectAllIds = [];
      let that = this;
      this.multipleSelectionAll.forEach(row=>{
        selectAllIds.push(row[idKey]);
      })
      this.$refs.table.clearSelection();
      for(var i = 0; i < this.tableData.length; i++) {  
        if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
        // 设置选中,记住table组件需要使用ref="table"
          this.$refs.table.toggleRowSelection(this.tableData[i], true);
        }
      }
    },
      // 记忆选择核心方法
    changePageCoreRecordData () {
      // 标识当前行的唯一键的名称
      let idKey = this.idKey;
      let that = this;
      //如果总记忆中还没有选择的数据,那么就直接取当前页选中的数据,不需要后面一系列计算
      if (!this.multipleSelectionAll.length) {
        this.multipleSelectionAll = this.multipleSelection;
        return;
      }
      // 总选择里面的key集合
      let selectAllIds = [];
      this.multipleSelectionAll.forEach(row=>{
        selectAllIds.push(row[idKey]);
      })
      let selectIds = []
      // 获取当前页选中的id
      this.multipleSelection.forEach(row=>{
        selectIds.push(row[idKey]);
        // 如果总选择里面不包含当前页选中的数据,那么就加入到总选择集合里
        if (selectAllIds.indexOf(row[idKey]) < 0) {
          that.multipleSelectionAll.push(row);
        }
      })
      let noSelectIds = [];
      // 得到当前页没有选中的id
      this.tableData.forEach(row=>{
        if (selectIds.indexOf(row[idKey]) < 0) {
          noSelectIds.push(row[idKey]);
        }
      })
      noSelectIds.forEach(id=>{
        if (selectAllIds.indexOf(id) >= 0) {
          for(let i = 0; i< that.multipleSelectionAll.length; i ++) {
            if (that.multipleSelectionAll[i][idKey] == id) {
            // 如果总选择中有未被选中的,那么就删除这条
            that.multipleSelectionAll.splice(i, 1);
            break;
            }
          }
        }
      })
    },
    // 多选的行数据
    handleSelectionChange(val) {
      this.multipleSelection = val
        setTimeout(()=>{
      this.changePageCoreRecordData();
      }, 50)
    },
    // 获取表格数据
    getData(form) {
      let parmas = _.cloneDeep(form);
      parmas.liveArea = typeof(parmas.liveArea) === 'object'?parmas.liveArea.join(''):parmas.liveArea;
      recordSearch(form).then(res => {
        if (res.rows) {
          this.tableData = res.rows;
          this.total = res.total;
          this.exportData = _.cloneDeep(form);
          setTimeout(()=>{
            this.setSelectRow();
          }, 50)
        }
        else {
          this.tableData = [];
          this.total = 0;
        }
      })
    }
  },
  mounted(){
    this.getData(this.form)
  }
}
</script>
<style lang="sass" scoped>
  
</style>

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

Javascript 相关文章推荐
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
vue实现数字滚动效果
Jun 29 #Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 #Javascript
Vue实现可移动水平时间轴
Jun 29 #Javascript
uniapp与webview之间的相互传值的实现
Jun 29 #Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 #Javascript
iview实现图片上传功能
Jun 29 #Javascript
vue+animation实现翻页动画
Jun 29 #Javascript
You might like
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python中装饰器的一个妙用
2015/02/08 Python
python文件的md5加密方法
2016/04/06 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
python脚本和网页有何区别
2020/07/02 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
银行财务部实习生的自我鉴定
2013/11/27 职场文书
行政专员求职信范文
2014/05/03 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
oracle数据库去除重复数据
2022/05/20 Oracle