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分页/筛选后保留勾选项 的相关文章

  • Javascript 与 Python 关于 Python 'map()' 函数的比较

    Python中有一个函数叫做map这可以让你去 map someFunction x y z 并继续应用该功能的列表 是否有与此功能等效的 JavaScript 我现在刚刚学习Python 虽然我被告知javascript是函数式语言 但我
  • 您可以使用 JavaScript 触发自定义 HTML5 表单错误吗?

    如果我有一个像这样的输入
  • JavaScript 对象引用缓存

    我们的代码库中有很多对象 它们的名称空间是为了避免冲突 Example App local view MyView 在我在代码库中看到的大多数地方 我们使用完整路径来获取对对象的引用 并且这在同一函数中重复多次 Example functi
  • 将 Javascript 变量转换为 PHP 变量

    我想使用由 videoel getCurrentTime 函数返回给我的 javascript 变量 并将其转换为 php 变量 以便我能够将其添加到我的 SQL 插入查询中 例如 INSERT INTO tblData VALUES ph
  • 如何在光标下的所有元素上调用 mouseover?

    我有一个网络应用程序 每次单击时都会创建一个点 见下文 当我将鼠标悬停在一堆点上时 我希望光标下的每个点都会触发 mouseover 或 mouseenter 事件 然而 只有一个事件被触发 即堆栈 顶部 的点的事件 当鼠标移动到一堆多个点
  • 检查 DOM 元素是否为复选框

    如何检查给定的 DOM 元素是否为复选框 设想 我有一组文本框和复选框 其中的值是动态分配的 我没有办法识别 DOM 元素是复选框还是文本框 只使用普通的 javascript 你就可以做到 if el type el type check
  • 未捕获的类型错误:this.props.signinUser 不是一个函数(…)

    src actions index js import axios from axios const ROOT URL http localhost 3090 export function signinUser email passwor
  • 如何从表中选择所有偶数 id?

    我想从 MySQL 数据库的表中选择所有甚至帖子 ID 然后显示它们 我还想获取所有带有奇怪 id 的帖子并将它们显示在其他地方 我想使用 PHP 来完成此操作 因为这是我使用的服务器端语言 或者 我是否必须选择所有帖子 然后使用 Java
  • 零作为 IIFE 中的第一个参数[重复]

    这个问题在这里已经有答案了 In babeljs v6 5 1 class Foo 编译为 use strict var classCallCheck2 require babel runtime helpers classCallChec
  • 为什么将数据存储为元素的属性存在风险?

    我一直在读同样的东西 直接在 DOM 元素上存储属性值是有风险的 因为可能会发生内存泄漏 但有人可以更详细地解释这些风险吗 按属性 我假设您指的是 DOM 元素上的属性 DOM 元素上的自定义属性安全吗
  • JQuery DataTable 单元格从行单击

    我正在尝试在 jquery 数据表上实现一个函数 该函数返回单击行的第一列和第四列 我正在遵循这个示例 它允许我操作单击的行http datatables net examples api select single row html ht
  • 专用网络:web3.eth.getAccounts() 始终发送空数组

    我正在运行一个私人以太坊网络 我确实用https aws amazon com blockchain templates 整个设置已经完成 AWS 上的设置看起来正确 现在 我正在尝试创建帐户并检索所有这些帐户 为此 我使用以下方法 Web
  • 空 URL 哈希导致页面在 js 事件上跳转

    我有一个带有下一个和上一个按钮的照片库 如果我的某个 javascript 方法由于某种原因被破坏 那么当单击其中一个按钮时 它会向 url 添加一个哈希值 即 www google com 我知道可以给散列一个 div id 来跳转到页面
  • setInterval 内的返回值

    我想在 setInterval 内返回一个值 我只想以一定的时间间隔执行一些操作 这就是我尝试过的 function git limit var i 0 var git setInterval function console log i
  • 使用 onBlur 事件上的值更新 React 输入文本字段

    我有以下输入字段 在模糊时 该函数调用服务来更新服务器的输入值 完成后 它会更新输入字段 我怎样才能让它发挥作用 我可以理解为什么它不允许我更改字段 但我能做些什么才能使其工作 我无法使用defaultValue因为我会将这些字段更改为其他
  • 常规 JavaScript 可以与 jQuery 混合使用吗?

    例如 我可以采用这个脚本 来自 Mozilla 教程 https developer mozilla org en Canvas tutorial Basic usage
  • ThreeJS无法加载Json文件

    首先 我已经读过这个问题 https stackoverflow com questions 17201888 three js exporter export object not working with jsonloader r58没
  • 使用 React React-router 登录后重定向到主页,并且 usenavigate 不起作用?

    我希望用户在成功登录后重定向到主页 我将用户登录的 api 请求的数据存储在一个名为 currentUser 的变量中 因此如果 currentUser 为 true 它应该重定向到主页 这就是我处理登录请求的方式 export const
  • FullCalendar 检查选择日是否有活动?

    我正在使用 Full Calendar js 插件 到目前为止一切顺利 但我想检查开始和结束之间的选择是否有事件 我只需要返回 true 或 false 基本上 如果日期选择中已经存在事件 我想阻止用户创建事件 var calendar c
  • 获取淘汰赛中被点击元素的索引

    获取无序列表中单击元素的索引的最佳方法是什么 让我举个例子 假设我有以下 HTML 代码 ul li p p li ul 现在我有以下 javascript 代码来获取索引 self itemClicked function data it

随机推荐

  • 编译驱动时报错:./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上加