element-ui表格跨页多选实现

前言

在我们日常项目开发中,经常会有表格跨页多选的需求,接下来让我们用 el-table 示例一步步来实现这个需求。

动手开发

在线体验

https://codesandbox.io/s/priceless-mcclintock-4cp7x3?file=/src/App.vue

常规版本

本部分只写了一些重点代码,心急的彦祖可以直接看 性能进阶版

  1. 首先我们需要初始化一个选中的数组 checkedRows
this.checkedRows = []
  1. 在触发选中的时候,我们就需要把当前行数据 push 到 checkedRows,否则就需要剔除对应行
<el-table ref="multipleTable" @select="handleSelectChange">
handleSelectChange (val, row) {
  const checkedIndex = this.checkedRows.findIndex(_row => _row.id === row.id)
  if (checkedIndex > -1) {
    // 选中剔除
    this.checkedRows.splice(checkedIndex, 1)
  } else {
    // 未选中压入
    this.checkedRows.push(row)
  }
}
  1. 实现换页的时候的回显逻辑
this.data.forEach(row=>{
  const checkedIndex = this.checkedRows.findIndex(_row => _row.id === row.id)
  if(checkedIndex>-1) this.$refs.multipleTable.toggleRowSelection(row,true)
})

效果预览

让我们看下此时的效果

2023-08-08 20.03.52.gif

完整代码

<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @select="handleSelectChange"
      @select-all="handleSelectAllChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        label="日期"
        width="120"
        prop="date"
      />
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
      />
    </el-table>
    <el-pagination
      background
      :current-page.sync="currentPage"
      layout="prev, pager, next"
      :total="1000"
      @current-change="currentChange"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentPage: 1,
      checkedRows: [],
      pageSize: 10,
      totalData: Array.from({ length: 1000 }, (_, index) => {
        return {
          date: '2016-05-03',
          id: index,
          name: '王小虎' + index
        }
      })
    }
  },
  computed: {
    tableData () {
      const { currentPage, totalData, pageSize } = this
      return totalData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
    }
  },
  methods: {
    currentChange (page) {
      this.currentPage = page
      this.tableData.forEach(row => {
        const checkedIndex = this.checkedRows.findIndex(_row => _row.id === row.id)
        if (checkedIndex > -1) this.$refs.multipleTable.toggleRowSelection(row, true)
      })
    },
    handleSelectChange (val, row) {
      const checkedIndex = this.checkedRows.findIndex(_row => _row.id === row.id)
      if (checkedIndex > -1) {
        this.checkedRows.splice(checkedIndex, 1)
      } else {
        this.checkedRows.push(row)
      }
    },
    handleSelectAllChange (val) {
      this.tableData.forEach(row => {
        this.handleSelectChange(null, row)
      })
    }
  }
}
</script>

性能进阶版

性能缺陷分析

优秀的彦祖们,应该发现以上代码的性能缺陷了

1.handleSelectChange 需要执行一个 O(n) 复杂度的循环

2.currentChange 的回显逻辑内部, 有一个 O(n^2) 复杂度的循环

想象一下 如果场景中勾选的行数达到了 10000 行, 每页显示 100 条

那么我们每次点击换页 最坏情况就要执行 10000 * 100 次循环,这是件可怕的事…

重新设计数据结构

其实我们没必要把 checkedRows 设计成一个数组, 我们可以设计成一个 map,这样读取值就只需要 O(1)复杂度

1.改造 checkedRows

this.crossPageMap = new Map()

2.修改选中逻辑(核心代码)

handleSelectChange (val, row) {
  // 实现了 O(n) 到 O(1) 的提升
  const checked = this.crossPageMap.has(row.id)
  if (checked) {
    this.crossPageMap.delete(row.id)
  } else {
    this.crossPageMap.set(row.id, row)
  }
}

3.修改换页回显逻辑

currentChange (page) {
  this.currentPage = page
  // 实现了 O(n^2) 到 O(n) 的提升
  this.tableData.forEach(row => {
    const checked = this.crossPageMap.has(row.id)
    if (checked) this.$refs.multipleTable.toggleRowSelection(row, true)
  })
}

完整代码

<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%;height:500px"
      @select="handleSelectChange"
      @select-all="handleSelectAllChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        label="日期"
        width="120"
        prop="date"
      />
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
      />
    </el-table>
    <el-pagination
      background
      :current-page.sync="currentPage"
      layout="prev, pager, next"
      :total="1000"
      @current-change="currentChange"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentPage: 1,
      crossPageMap: new Map(),
      pageSize: 10,
      totalData: Array.from({ length: 1000 }, (_, index) => {
        return {
          date: '2016-05-03',
          id: index,
          name: '王小虎' + index
        }
      })
    }
  },
  computed: {
    tableData () {
      const { currentPage, totalData, pageSize } = this
      return totalData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
    }
  },
  methods: {
    currentChange (page) {
      this.currentPage = page
      this.tableData.forEach(row => {
        const checked = this.crossPageMap.has(row.id)
        if (checked) this.$refs.multipleTable.toggleRowSelection(row, true)
      })
    },
    handleSelectChange (val, row) {
      const checked = this.crossPageMap.has(row.id)
      if (checked) {
        this.crossPageMap.delete(row.id)
      } else {
        this.crossPageMap.set(row.id, row)
      }
    },
    handleSelectAllChange (val) {
      this.tableData.forEach(row => {
        this.handleSelectChange(null, row)
      })
    }
  }
}
</script>

抽象业务逻辑

以上就是完整的业务代码部分,但是为了复用性。

我们考虑可以把其中的逻辑抽象成一个CrossPage类

设计 CrossPage 类

接收以下参数

`data` - 行数据
`key` - 行数据唯一值
`max` - 最大选中行数
`toggleRowSelection` - 切换行数据选中/取消选中的方法

提供以下方法

`onRowSelectChange` - 外部点行数据点击的时候调用此方法
`onDataChange` - 外部数据变化的时候调用此方法
`clear` - 清空所有选中行

构造器大致代码 如下

constructor (options={}) {
    this.crossPageMap = new Map()
    this.key = options.key || 'id'
    this.data = options.data || []
    this.max = options.max || Number.MAX_SAFE_INTEGER
    this.toggleRowSelection = options.toggleRowSelection
    if(typeof this.toggleRowSelection !== 'function') throw new Error('toggleRowSelection is not function')
}

设置私有crossPageMap

彦祖们,问题来了,我们把crossPageMap挂载到实例上,那么外部就可以直接访问修改这个变量。

这可能导致我们内部的数据逻辑错乱,所以必须禁止外部访问。

我们可以使用 # 修饰符来实现私有属性,具体参考

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/Private_class_fields

完整代码

  • CrossPage.js
/**
 * @description 跨页选择
 * @param {Object} options
 * @param {String} options.key 行数据唯一标识
 * @param {Array} options.data 行数据
 * @param {Number} options.max 最大勾选行数
 * @param {Function} options.toggleRowSelection 设置行数据选中/取消选中的方法,必传
 */
export const CrossPage = class {
  #crossPageMap = new Map();
  constructor (options={}) {
    this.key = options.key || 'id'
    this.data = options.data || []
    this.max = options.max || Number.MAX_SAFE_INTEGER
    this.toggleRowSelection = options.toggleRowSelection
    if(typeof this.toggleRowSelection !== 'function') throw new Error('toggleRowSelection is not function')
  }
  get keys(){
    return Array.from(this.#crossPageMap.keys())
  }
  get values(){
    return Array.from(this.#crossPageMap.values())
  }
  get size(){
    return this.#crossPageMap.size
  }
  clear(){
    this.#crossPageMap.clear()
    this.updateViews()
  }
  onRowSelectChange (row) {
    if(typeof row !== 'object') return console.error('row is not object')
    const {key,toggleRowSelection} = this
    const checked = this.#crossPageMap.has(row[key])
    if(checked) this.#crossPageMap.delete(row[key])
    else {
      this.#crossPageMap.set(row[key],row)
      if(this.size>this.max){
        this.#crossPageMap.delete(row[key])
        toggleRowSelection(row,false)
      }
    }
  }
  onDataChange(list){
    this.data = list
    this.updateViews()
  }
  updateViews(){
    const {data,toggleRowSelection,key} = this
    data.forEach(row=>{
      toggleRowSelection(row,this.#crossPageMap.has(row[key]))
    })
  }
}
  • crossPage.vue
<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @select="handleSelectChange"
      @select-all="handleSelectAllChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        label="日期"
        width="120"
        prop="date"
      />
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
      />
    </el-table>
    <el-button @click="clear">
      清空
    </el-button>
    <el-button @click="keys">
      获取 keys
    </el-button>
    <el-button @click="values">
      获取 values
    </el-button>
    <el-pagination
      background
      :current-page.sync="currentPage"
      layout="prev, pager, next"
      :total="1000"
      @current-change="currentChange"
    />
  </div>
</template>

<script>
import { CrossPage } from './CrossPage'
export default {
  data () {
    return {
      currentPage: 1,
      pageSize: 10,
      totalData: Array.from({ length: 1000 }, (_, index) => {
        return {
          date: '2016-05-03',
          id: index,
          name: '王小虎' + index
        }
      }),
      multipleSelection: []
    }
  },
  computed: {
    tableData () {
      const { currentPage, totalData, pageSize } = this
      return totalData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
    }
  },
  mounted () {
    this.crossPageIns = new CrossPage({
      key: 'id',
      max: 2,
      data: this.tableData,
      toggleRowSelection: this.$refs.multipleTable.toggleRowSelection
    })
  },

  methods: {
    clear () {
      this.crossPageIns.clear()
    },
    keys () {
      console.log('keys:', this.crossPageIns.keys)
    },
    values () {
      console.log('values:', this.crossPageIns.values)
    },
    currentChange (page) {
      this.currentPage = page
      // 调用实例 onDataChange 方法
      this.crossPageIns.onDataChange(this.tableData)
    },
    handleSelectChange (val, row) {
      // 调用实例 onRowSelectChange 方法
      this.crossPageIns.onRowSelectChange(row)
    },
    handleSelectAllChange (val) {
      this.tableData.forEach(row => {
        this.crossPageIns.onRowSelectChange(row)
      })
    }
  }
}
</script>

写在最后

未来想做的还有很多

  • 利用requestIdleCallback 提升单页大量数据的 toggleRowSelection 渲染效率
  • 提供默认选中项的配置
  • …

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/67680.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

使用chatGPT-4 畅聊量子物理学

使用chatGPT-4 畅聊量子物理学

与chatGPT深入研究起源、基本概念&#xff0c;以及海森堡、德布罗意、薛定谔、玻尔、爱因斯坦和狄拉克如何得出他们的想法和方程。 1965 年&#xff0c;费曼&#xff08;左&#xff09;与朱利安施温格&#xff08;未显示&#xff09;和朝永信一郎&#xff08;右&#xff09;分享…
阅读更多...
机器学习深度学习——文本预处理

机器学习深度学习——文本预处理

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——序列模型&#xff08;NLP启动&#xff01;&#xff09; &#x1f4da;订阅专栏&#xff1a;机器学习&am…
阅读更多...
大厂容器云实践之路（二）

大厂容器云实践之路（二）

3-网易蜂巢的DOCKER实践之路 面临问题 场景分析 如何解决 功能性需求&#xff08;基础&#xff09; 第一步 技术支撑公有化 开发流程 场景分析 功能性需求&#xff08;基础&#xff09; 非功能性需求&#xff08;SLA&#xff09; 第二步 产品技术云端化 开发流程 场景分析…
阅读更多...
Maven介绍，部署在eclipse中

Maven介绍，部署在eclipse中

目录 一.Maven介绍 1&#xff0c;什么是maven&#xff1f; 2. 为什么maven会在企业中大量使用&#xff1f; 3.没有使用maven的前后区别? 4.maven在Java开发中的实际效果图 二.maven部署在eclipse中 1.下载maven在其官方网址下载&#xff08;当然实际下载也要根据个人的…
阅读更多...
C语言案例 判断是否为回文数-06

C语言案例 判断是否为回文数-06

题目&#xff1a;随机输入一个5位数&#xff0c;判断它是不是回文数 步骤一&#xff1a;定义程序的目标 编写C程序&#xff0c;随机输入一个5位数&#xff0c;判断它是不是回文数 步骤二&#xff1a;程序设计 原理&#xff1a;即12321是回文数&#xff0c;个位与万位相同&#…
阅读更多...
【C++学习手札】new和delete看这一篇就够了！

【C++学习手札】new和delete看这一篇就够了！

​ 食用指南&#xff1a;本文在有C基础的情况下食用更佳 &#x1f340;本文前置知识&#xff1a; C类 ♈️今日夜电波&#xff1a; Prover—milet 1:21 ━━━━━━️&#x1f49f;──────── 4:01 …
阅读更多...
学习C语言第三天 ：关系操作符、逻辑操作符

学习C语言第三天 ：关系操作符、逻辑操作符

1.关系操作符 C语言用于比较的表达式&#xff0c;称为“关系表达式”里面使用的运算符就称(relationalexpression)&#xff0c;为“关系运算符” (relationaloperator) &#xff0c;主要有下面6个。 > 大于运算符 < 小于运算符 > 大于等于运算符 < 小于等…
阅读更多...
JVM基础篇-直接内存

JVM基础篇-直接内存

JVM基础篇-直接内存 什么是直接内存? 直接内存( 堆外内存 ) 指的是 Java 应用程序通过直接方式从操作系统中申请的内存,这块内存不属于jvm 传统方式读取文件 首先会从用户态切换到内核态&#xff0c;调用操作系统函数从磁盘读取文件&#xff0c;读取一部分到操作系统缓冲区…
阅读更多...
电影院订票选座网站小程序开发（java开源）

电影院订票选座网站小程序开发（java开源）

搭建一个电影院订票选座网站小程序需要掌握Java语言和相关的Web开发技术&#xff0c;同时需要使用开源框架和库来实现。以下是一个基本的步骤指南&#xff1a; 确定技术栈 首先&#xff0c;需要确定使用的技术栈&#xff0c;以便更好的开展工作。 设计数据库 设计数据库需要…
阅读更多...
H5实现签字板签名功能

H5实现签字板签名功能

前言&#xff1a;H5时常需要实现给C端用户签名的功能&#xff0c;以下是基于Taro框架开发的H5页面实现&#xff0c;非 Taro 的 View 标签换成 div 即可。 一、用到的技术库 签字库&#xff1a;react-signature-canvas主流React Hooks 库&#xff1a;ahooks 二、组件具体实现…
阅读更多...
2024考研408-计算机网络 第四章-网络层学习笔记

2024考研408-计算机网络 第四章-网络层学习笔记

文章目录 前言一、网络层的功能1.1、网络层功能概述&#xff08;三种功能介绍&#xff09;1.2、SDN基本概念1.2.1、理解转发与路由选择1.2.1.1、转发1.2.1.2、路由选择 1.2.2、数据平面&#xff08;转发&#xff09;1.2.3、控制平面&#xff08;路由计算与选择&#xff09;实现…
阅读更多...
【SpringBoot框架篇】33.优雅集成i18n实现国际化信息返回

【SpringBoot框架篇】33.优雅集成i18n实现国际化信息返回

文章目录 1.简介2.MessageSource配置和工具类封装2.1.配置MessageSource相关配置2.2.配置工具类2.3.测试返回国际级文本信息 3.不优雅的web调用示例(看看就行&#xff0c;别用)4.优雅使用示例4.1.错误响应消息枚举类4.2.ThreadLocal工具类配置4.2.1.ThreadLocal工具类数据封装4…
阅读更多...
W6100-EVB-PICO 做TCP Server进行回环测试（六）

W6100-EVB-PICO 做TCP Server进行回环测试（六）

前言 上一章我们用W6100-EVB-PICO开发板做TCP 客户端连接服务器进行数据回环测试&#xff0c;那么本章将用开发板做TCP服务器来进行数据回环测试。 TCP是什么&#xff1f;什么是TCP Server&#xff1f;能干什么&#xff1f; TCP (Transmission Control Protocol) 是一种面向连…
阅读更多...
selenium爬虫，配置谷歌浏览器的driver

selenium爬虫，配置谷歌浏览器的driver

用selenium爬虫时&#xff0c;明明已经安装了selenium模块&#xff0c;程序却运行不了。在使用selenium之前必须先配置浏览器对应版本的webdriver 本文主要涉及驱动有问题driver 网上有很多手动的方法&#xff08;查看谷歌浏览的版本然后在其他博主分享的webdriver中下载与自己…
阅读更多...
研发工程师玩转Kubernetes——通过PV的节点亲和性影响Pod部署

研发工程师玩转Kubernetes——通过PV的节点亲和性影响Pod部署

在《研发工程师玩转Kubernetes——PVC通过storageClassName进行延迟绑定》一文中&#xff0c;我们利用Node亲和性&#xff0c;让Pod部署在节点ubuntud上。因为Pod使用的PVC可以部署在节点ubuntuc或者ubuntud上&#xff0c;而系统为了让Pod可以部署成功&#xff0c;则让PVC与Pod…
阅读更多...
【Windows系统】磁盘、Partition和Volume的联系与区别

【Windows系统】磁盘、Partition和Volume的联系与区别

1、磁盘 Disk&#xff0c;磁盘。 以下摘自微软 磁盘设备和分区 - Win32 apps | Microsoft Learn 硬盘由一组堆积的盘片组成&#xff0c;其中每个盘片的数据都以电磁方式存储在同心圆或 轨道中。 每个盘片都有两个头&#xff0c;一个在盘片的两侧&#xff0c;在磁盘旋转时读取…
阅读更多...
idea-常用插件汇总

idea-常用插件汇总

idea-常用插件汇总 码云插件 这个插件是码云提供的ps-码云是国内的一款类似github的代码托管工具。 Lombok Lombok是一个通用Java类库&#xff0c;能自动插入编辑器并构建工具&#xff0c;简化Java开发。通过添加注解的方式&#xff0c;不需要为类编写getter或setter等方法…
阅读更多...
1. CUDA编程手册中文版---CUDA简介

1. CUDA编程手册中文版---CUDA简介

1.CUDA简介 1.1 我们为什么要使用GPU 更多精彩内容&#xff0c;请扫描下方二维码或者访问https://developer.nvidia.com/zh-cn/developer-program 来加入NVIDIA开发者计划 GPU&#xff08;Graphics Processing Unit&#xff09;在相同的价格和功率范围内&#xff0c;比CPU提供…
阅读更多...
【C++】多态的底层原理(虚函数表)

【C++】多态的底层原理(虚函数表)

文章目录 前言一、虚函数表二、派生类中虚函数表1.原理2.例子&#xff1a; 三、虚函数的存放位置四 、单继承中的虚函数表五、多继承中的虚函数表六、问答题 前言 一、虚函数表 通过观察测试我们发现b对象是8bytes&#xff0c;除了_b成员&#xff0c;还多一个__vfptr放在对象的…
阅读更多...
易服客工作室：7个优质WordPress LMS线上教育系统插件比较(优点和缺点)

易服客工作室：7个优质WordPress LMS线上教育系统插件比较(优点和缺点)

您是否正在为您的 WordPress 网站寻找最好的 LMS 插件&#xff1f;在线学习管理系统 (LMS) 插件允许您使用 WordPress 创建和运行类似 Udemy 的在线课程。 一个完美的 WordPress LMS 插件包括管理在线课程内容、处理订阅、运行和评分测验、接受付款等功能。 在本文中&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023