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 相关文章推荐
JS 文件本身编码转换 图文教程
Oct 12 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 Javascript
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中$_FILES的使用以及注意事项
2013/07/05 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
python线程中同步锁详解
2018/04/27 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python实现把类当做字典来访问
2019/12/16 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
自我评价的正确写法
2013/09/19 职场文书
服务承诺书怎么写
2014/05/24 职场文书
尊师重教主题班会
2015/08/14 职场文书
庭外和解协议书
2016/03/23 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
导游词之清晏园
2019/11/22 职场文书
导游词之昭君岛
2020/01/17 职场文书