el-table实现分页切换后还能继续保持之前的勾选状态

2023-10-27

 

 

 

 <el-table
      ref="tableRef"
      :height="height"
      v-loading="tableConfig.isLoading"
      :data="tableData"
      :row-key="handleRowKey"
      @selection-change="handleSelectionChange" 
    >
       <el-table-column :reserve-selection="true" type="selection" />
        <el-table-column
          type="index"
          :index="indexMethod"
          fixed="left"
        />
</el-table>

data() {
    return: {    
        ids: []
    }
}

porps: {
    idName: {
      type: String,
      default: "id",
    }, // 表格行的唯一标识,默认是 id
}


methods: {
    /**
     * @Event 方法
     * @description: 切换分页时,保持选中状态的标识
     * */
    handleRowKey(row) {
       return row[this.idName]
    },


   /**
   * @Event 方法
   * @description: 监听多选操作
   * */
    handleSelectionChange(selection) {
       this.ids = selection.map((item) => item[this.idName])
    },


    /**
     * @Event 方法
     * @description: 设置表格后一页的index在前一页的index基础上累加
     * @params: pageSize pageNum 
     * */
    indexMethod(index) {
      // return index + 1 // 如果不想要累加效果,请打开此项
      return (
        index +
        this.paginationConfig.pageSize * (this.paginationConfig.pageNum - 1) +
        1
      );
    },

}






本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

el-table实现分页切换后还能继续保持之前的勾选状态 的相关文章

随机推荐

  • C# 消除游戏

    就是练成3个或者以上就消除的游戏我用C 没事写的 可能有漏洞 主要是练习C 的绘图 代码 Program cs using System using System Windows Forms namespace ColorRect
  • springboot @schedule和@Async定时任务的异步 同步 多任务并发

    schedule schedule注解参数有如下 cron cron表达式 指定任务在特定时间执行 fixedDelay 表示上一次任务执行完成后多久再次执行 参数类型为long 单位ms fixedDelayString 与fixedDe
  • flask ajax json html,后端后,渲染模板通过Flask中的Ajax从前端接收JSON

    我试图通过Ajax接收Post quest JSON文件 后呈现模板 但是它不起作用 除了我进入页面http localhost 5000 distance comuting时 它可以显示数据结果 lat data lng 这是我的代码 m
  • 23年 yolov5车辆识别+行人识别+车牌识别+车速检测代码(python)

    行人识别yolov5和v7对比 yolo车距 yolo车距1 代码 yolov5车辆检测代码 已有1503人下载 代码无需更改 直接可以预测 流程
  • python数据可视化毕业设计题目_python:数据可视化

    题目 data txt 中的数据表示地球表面各个经纬度坐标的海拔高度 其中每行三个浮点数 分别是经度 180 180 纬度 90 90 和高度 数据中经纬度的间隔是 0 1 度 高度的单位是米 请设计合适的颜色映射函数 实现地形图的经纬度投
  • Sortable+Element表格拖拽排序

  • UE4和C++中的UI第2篇(UI上定义控件)

    1 将text拖入过来 2 设置text
  • neo4j.exceptions.AuthError: The client is unauthorized due to authentication

    尝试使用Python控制neo4j 但是使用graph create 的时候报错neo4j exceptions AuthError The client is unauthorized due to authentication 网上找了
  • webstorm或者idea出现windows找不到文件chrome

    webstorm或者idea出现windows找不到文件chrome 解决方法 今天使用webstorm调试的时候 竟然出现windows找不到文件chrome的错误 步骤 1 右击桌面上的chrome浏览器图标 属性 gt 快捷方式 gt
  • 1500*C. Tenzing and Balls (线性DP)

    解析 每次选择两个相同的数 删去他们以及他们之间的所有数 问最多可以删除多少 DP 对于某个位置 i 其前面有多个 j 使得 a i a j 所以使用 f i 来记录前 i 个数能够删除的最大值 include
  • lambda表达式&Stream

    lambda表达式 1 前言 在Java中 为了将某些功能传递 总要取创建类 内部类 匿名内部类 为了更简便 jdk8之后 Java新增了Lambda表达式 2 概念 lambda又称函数式编程 将函数作为参数进行传递 使得代码更简洁 3
  • 【Java文件流】管理文件和文件夹:File类

    Java中不像C C 那样设有专门的文件打开 关闭 跳转等方式 直接交给File类管理 开放几个方法 直接操作文件和文件夹 这十分利于新手入门 文章目录 方法 构造方法 路径问题 创建文件 文件夹方法 删除文件 文件夹方法 判断方法 获取方
  • 关于两台主机间通信(同网段)不需要通过网关,详细过程

    两台主机间通信 同网段 不需要通过网关 主机A由ping程序在应用层产生数据ICMPRequest type8 直接在网络层封装源地址和目的地址 再到网络接口层封装帧头 帧尾 FCS 帧头需封装SMAC及DMAC和Type 0x0800 表
  • maven的依赖包无法下载解决

    编译geoserver出现 Failed to execute goal on project gs platform Could not resolve dependencies for project org geoserver gs
  • windows上安装tensorflow

    tensorflow0 12版本支持windows 需要python3 5 x 安装python3 5 x 下载 python3 5 2 安装 第一个Install Now是默认安装在c盘的 第二个是自己选择安装路径 我选择第二个 同时将A
  • Unity3D魔方游戏如何完成魔方的旋转

    本游戏是我自学unity后制作的第一个游戏 对于通过何种方法来生成魔方 我就不在多做描述了 因为关于生成的代码网上很多 但是关于如何旋转的却很少 在我在网上查找如何旋转魔方的方法时 找到的都是一些复杂的方法 对于我这样的初学者来说很不友好
  • FindBugs-IDEA插件的使用

    一 前言 FindBugs是一款Java静态代码分析工具 与其他静态分析工具 如Checkstyle和PMD 不同 FindBugs不注重样式或者格式 它专注于寻找真正的缺陷或者潜在的性能问题 它可以帮助java工程师提高代码质量以及排除隐
  • Qt 主要框架

    Qt提供了许多不同的框架和模块 用于开发各种类型的应用程序 以下是一些主要的Qt框架 Qt Core 这是Qt的核心模块 提供了基本的非图形功能 例如字符串处理 文件I O 事件处理 容器类等 它也包含信号和槽机制 是Qt应用程序中常用的基
  • 调试厉器addr2line

    addr2line 将地址转换为文件名和行号的命令行工具 在C C 程序的调试过程中 我们通常会使用调试器 如GDB 来定位崩溃或错误的位置 但有时候 我们可能只能获得程序崩溃时的地址 而没有调试器的支持 这时候 addr2line就可以帮
  • el-table实现分页切换后还能继续保持之前的勾选状态