element-ui table分页/筛选后保留勾选项

2023-11-15

在使用elementui中的table时,有时会涉及到勾选完数据切换页数或者使用搜索框搜索后已勾选数据消失,而elementul有个属性可以处理这个情况,reserve-selection和row-key搭配使用。

使用步骤:

  1. 在table上加上 :row-key=“getRowKey” (或者 row-key="id"若直接绑定id,则不需要第三步,取决于绑定的值是否可以直接拿到或者table是否抽离为公共组件);
  2. 在type=“selection” 那一列标签上写 :reserve-selection=“true”
  3. 在methods中编写方法getRowKey
<template>
  <span>
      <el-table
      	ref="table"
        :row-key="getRowKey"
        :data="tableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
         type="selection"
         :reserve-selection="true"
        >
        </el-table-column>
        <el-table-column
         prop="name"
         label="姓名"
        >
        </el-table-column>
      </el-table>
    </el-dialog>
  </span>
</template>

<script>
export default {
  methods: {
    getRowKey(row) {
      return row.id;
    },
    handleSelectionChange (list) {
	  console.log('选中的数据', list)
	}
};
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

element-ui table分页/筛选后保留勾选项 的相关文章

随机推荐

  • 编译驱动时报错:./arch/x86/include/asm/atomic64_64.h: At top level:

    在编译6ULL驱动的时候程序报错 base c 4 arch x86 include asm atomic64 64 h At top level arch x86 include asm atomic64 64 h 31 33 error
  • Java里的锁

    前言 锁 最初是人类为了保护自己的财产而发明的一种用钥匙才能开启的装置 防范的是外部人员 正常手段下没有钥匙是不能绕过物理锁的 而在程序世界里 锁的设计则是为了保护数据资源 但并不能防范外部攻击 只能算是内部协作的一个约束 无论内外部 只要
  • Android APK反编译技巧全讲解

    Android APK反编译技巧全讲解 导言 在我们安卓开发当中 我们不仅需要掌握基础的开发技能 也需要掌握软件的安全技能 这样才可以让我们的软件能够成为一款能够真正可以进行发布的软件 同时也可以让自己的核心技术不会被别人所盗取 首先我们应
  • ul li ol 解决去除默认点 和 空白问题 缩进问题

    前面的空白 其实这段空白叫做 缩进 明白是缩进之后 在网上能搜到一堆处理的方法 使用firebug调试了很久 这段空白明明没有对应的样式控制啊 把margin left设置成0px也没用 后来反应过来 原来是缩进 据此搜索到解决办法 直接解
  • 不同平台的C/C++标准库

    1 C C 标准 C C 所涉及到的参与者 根据角色的不同 可以分为以下3类 C C 标准起草者 主要在ISO标准组织 International Organization for Standardization 他们负责对应C C 标准相
  • 元学习MAML算法详解

    Meta learning Meta learning 基本定义 元学习 又称 学习如何学习 就像我们人类学习新知识往往从以往得经验出发而很少从头开始一样 元学习以一种系统得 数据驱动得方式从先前得经验中学习 是一个可用于描述所以基于其他先
  • 【实操案例十一】使用try-except手动捕获异常 实例代码及运行效果图!

    任务一 编写程序输入学员成绩 异常捕获忘了的同学 可以参考这个 Bug的常见类型及异常处理机制 任务一 编写程序输入学员成绩 i int input 请输入学员成绩 if 0 lt i lt 100 print i else raise E
  • 【算法】稳定匹配二(JAVA版)

    详细介绍信息请看第一篇稳定匹配C 版这里不再过多讲述 下文直接贴代码 PiPei java package com dt pipei import java util Scanner public class Pipei public st
  • go+vue——基于gin框架和gorm的web开发实战

    go vue 基于gin框架和gorm的web开发实战 gin框架 视频 资料 笔记 安装Go环境 添加环境变量 可能自动添加好 下载 Go 环境变量 goland 报错 GOROOT is not defined 创建项目 Golang中
  • Netty架构剖析

    1 Netty逻辑架构 Netty采用了典型的三层网络架构进行设计和开发 Reactor通信调度层 1 它由一系列辅助类完成 包括Reactor线程NioEventLoop及其父类 NioSocketChannel NioServerSoc
  • 关于指针的一些知识

    文章目录 1 什么是指针 2 为什么要有指针 3 为什么32平台下 内存的最大有效空间为4G 4 指针 变量 的大小 5 指针的类型 5 1 指针的意义 6 指针的运算 6 1指针加减整数 6 2指针 指针 7 指针和数组 7 1为什么数组
  • qt中使用 ui 文件进行界面设计

    目录 1 创建 Qt 应用 2 项目创建成功 3 直接点击打开 mainwindow ui 文件 4 随便从左边侧边栏拖拽一个空间到 界面设计区域 5 在右侧边栏右键点击 pushButton 控件 点击转到槽 6 根据实际需要选择对应的信
  • 如何安装nodejs、webpack

    目录 前言 第一步 安装nodejs 第二步 全局安装webpack 第三步 局部安装webpack 前言 我在b站上面学习Vue的时候需要使用webpack进行模块化 那就安装webpack 老师说由于webpack需要nodejs的支持
  • 数据清洗常见问题(新手踩坑合集)【不定期更新】

    1 CSV打开发生错误 有些时候csv用pandas的pd read csv 地址 打开某些表格 横轴上无索引的 会出现这种情况 出现这样的情况后array的转化就十分不好搞 所以要加上一个 header None f pd read cs
  • 1024徽章获取

    听说今天发文章可以领徽章来着 作为一名准程序员也是有必要领一下得
  • IDEA报错:Error running ‘xxxApplication‘: Command line is too long. Shorten command line for xxxApp...

    1 找到 idea workspace xml 2 在 idea workspace xml里面找到
  • svc错误

    add N C Users Administrator workspace First WebContent testajax jsp Attempted to lock an already locked dir svn Working
  • springboot集成redis并设置过期时间

    redis作为常用的缓存工具在日常中经常使用 首先是下载redis redis github 选择windows linux安装即可 不会自己百度 下载好后配置 redis配置文件设置访问密码为123456 开始集成 maven依赖
  • 前端性能优化

    页面的性能指标 DCL DOMContentLoaded DOM解析完毕 FP First Paint 表示渲染出第一个像素点 FP一般在HTML解析完成或者解析一部分时候触发 FCP First Contentful Paint 表示渲染
  • element-ui table分页/筛选后保留勾选项

    在使用elementui中的table时 有时会涉及到勾选完数据切换页数或者使用搜索框搜索后已勾选数据消失 而elementul有个属性可以处理这个情况 reserve selection和row key搭配使用 使用步骤 在table上加