el-table跨页选中

id作为唯一标识

模板

<el-table :data="data" ref="table"@select-all="selectAll"@select="select"style="width:100%"><el-table-column type="selection"></el-table-column><el-table-column prop="id" label="id"></el-table-column>
</el-table>

变量

data: [],
selection: []

监听数据变动用于处理回显

watch: {data(nv) {//添加默认值const vm = thisvm.$nextTick(d => {vm.data.forEach(d => {if (this.selection.includes(d.id)) {vm.$refs['table'].toggleRowSelection(d, true)}})})}
}

处理复选逻辑

//length  > 0 去重添加   length == 0 删除
selectAll(selection) {const vm = thisif (selection.length) {//去重添加vm.selection = [...new Set([...vm.selection, ...selection.map(d => d.id)])]} else {//删除table中在selection 中缓存的内容const delArr = this.data.map(d => d.id)vm.selection = vm.selection.filter(d => !delArr.includes(d))}
},
//有则删除,无则添加
select(selection, row) {const vm = thisfor (let i = 0; i < vm.selection.length; i++) {if (vm.selection[i] == row.id) {return vm.selection.splice(i, 1)}}vm.selection.push(row.id)
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

bsc是指什么_为什么KPI令人厌恶?中小企业不要乱用KPI!

私信小编“绩效”两字&#xff0c;免费发送60分钟薪酬绩效管理内部培训视频。导读现在很多的企业都会对员工做一些绩效考核&#xff0c;大多数还是采用KPI的方式。但是员工对KPI的考核越来越反感&#xff0c;甚至出现抵触的情况。为什么会出现这种想象呢&#xff1f;其实很简单…

js原生popup_JavaScript的popup框

确认框用于使用户可以验证或者接受某些信息。当确认框出现后&#xff0c;用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认&#xff0c;那么返回值为 true。如果用户点击取消&#xff0c;那么返回值为 false。语法&#xff1a;confirm("文本")functi…

解决微信小程序 [Component] slot ““ is not found.

解决方式 当使用自定义组件或者slot标签作为组件A的插槽内容时&#xff0c;在组件A中必须定义一个默认插槽&#xff0c;对普通view等标签无限制。且因为wx:if为false的插槽等同没有定义 场景复现&#xff08;仅以自己遇到情况为例&#xff09; 1、调试基础库2.19.4 2、使用w…

列表排序应用FLIP动画(vue)

效果 原理详解 链接 1.beforeUpdate 获取first 变化前位置 (以id建立map映射) 2.updated 获取变化后位置 last 3.禁用transition并transform元素回初始位置 4.异步恢复transition 并取消 transform 代码 <template><div ref"container"><div style&…

面试项目亮点_码农:面试被问到自己项目亮点时,感觉自己的回答虚伪的不行!...

据我个人观察&#xff0c;大多数程序员都对自己现有的项目有吐糟的习惯&#xff0c;比如吐糟代码逻辑混乱&#xff0c;代码规范问题&#xff0c;代码可读性差&#xff0c;代码没有注释&#xff0c;没有文档&#xff0c;代码极度冗余等等&#xff0c;总之满眼看到的都是一些缺陷…

无敌小恐龙

断网恐龙小游戏无敌版&#xff0c;控制台输入 boxCompare _> false

怎样设计访谈提纲_论访谈提纲的设计

访谈提纲的设计一、访谈提纲如何设计:首先是该怎么命题&#xff0c;也就是访谈的主题或大题目是什么&#xff1b;其次是访谈的题目设计在多少比较合理&#xff1b;再次是访谈的主要点是什么&#xff1b;之后是各题目之间是什么关系&#xff1b;再后是访谈提纲设计注意哪些基本点…

微信小程序 仿 SwipeCell 的滑动单元格 SwipeBox

效果 代码 页面 调用Page <block wx:for"{{4}}" wx:key"{{item}}"><view style"text-align:center;padding:20px"><swipe-box><view slot"left" style"">左侧内容</view><view class&q…

u852日期限制解决补丁_《赛博朋克》1.06补丁出炉:进一步提升主机版本稳定性...

《赛博朋克2077》虽说是出师不利&#xff0c;但是开发商CDPR承诺自己会持续优化这款“尚待打磨”的作品&#xff0c;这种态度还是要稍微肯定一下的。我们看到之前CDPR就已经推送了1.05补丁&#xff0c;修复了大量的BUG以及问题&#xff0c;并且以游戏主机的BUG修复为重点&#…

微信小程序原生横向步骤条steps

效果 代码 调用 <rug-step options"{{steps}}" active"{{stepActive}}"></rug-step>steps: [{ label: 步骤1 },{ label: 步骤步骤步骤步骤2 },{ label: 步骤3 },{ label: 步骤步骤步骤步骤步骤4 },{ label: 步骤4 },{ label: 步骤4 },{ label…

华为云 手机 电脑登录不了怎么办 账户_华为云手机能解决芯片困难,是否真的实在,来西瓜视频找答案...

最近&#xff0c;网上到处流传着华为发布鲲鹏云手机的信息&#xff0c;有人说这个云手机能化解华为眼下的芯片燃眉之急的样子。事实真的如此吗?小编最近关注到&#xff0c;华为的鲲鹏云手机又成为大家关注和谈论的热点&#xff0c;甚至还有人说&#xff0c;华为有了云手机&…

单选复选状态控制类

场景 不同的平台写基础组件&#xff0c;写累了&#xff0c;对于单选复选这种逻辑闭合的组件&#xff0c;javascript 控制脚本是可以完全独立出来的&#xff0c;仅对外暴露状态即可根据不同的平台和环境进行视图的渲染 效果 使用 初始化 let selector new Selector({key: va…

康普顿效应是弹性碰撞吗_如何正确解读物理实验结果系列之十二——康普顿效应与光子...

作者&#xff1a;彭晓韬日期&#xff1a;2020年01月10日[文章摘要]&#xff1a;康普顿效应和光电效应一样&#xff0c;被广泛认定为支持光为光子的重要证据之一。但光电效应因无法解释紫限&#xff08;高于一定频率的光也不能产生光电效应&#xff09;现象而倍受质疑。同样地&a…

svn服务器搭建和使用 ubuntu_ubuntu下 SVN 服务器搭建及使用

简化篇http://blog.csdn.net/Eric_lmy/article/details/51942931详细篇1.安装Subversion ServerSubversion server binaries maintained by the Ubuntu Project. Packages include the Subversion client, and tools to create a Subversion repository and to make a reposito…

前端 滑动拼图校验 纯js组合式调用

前端 滑动拼图校验 纯js组合式调用效果思路代码效果 思路 独立滑块和拼图&#xff0c;通过实例方法组合使用,滑块和拼图均通过指定元素容器加载内容通过canvas 路径切片 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF…

一英寸芯片大小_科普:为什么标称1英寸的CMOS成像芯片,其对角线长度不是25.4mm?...

我们都知道&#xff0c;英寸和毫米的换算关系是&#xff1a;1英寸(inch) 25.4 mm。但是&#xff0c;对于一款CMOS成像芯片&#xff0c;虽然标称它的对角线尺寸为1英寸&#xff0c;实际测量只有大约16mm&#xff0c;和25.4mm相差甚远。这是为什么呢&#xff1f;这实际上是一个历…

前端处理取消选择文件动作

背景 项目中用到各种选择文件&#xff0c;且有很大一部分操作几乎相同&#xff0c;想要尽可能的简化选择上传文件的步骤&#xff0c;因此选择脚本生成 <input type"file"/> 标签的形式完成函数式的上传文件调用&#xff0c;但是如果打开了文件管理器但是并未选…

methods vue过滤器 和_数据动态过滤技巧在 Vue 项目中的实践

这个问题是在下在做一个 Vue 项目中遇到的实际场景&#xff0c;这里记录一下我遇到问题之后的思考和最后怎么解决的(老年程序员记性不好 -。-)&#xff0c;过程中会涉及到一些Vue源码的概念比如 $mount、 render watcher等&#xff0c;如果不太了解的话可以瞅瞅 Vue源码阅读系列…

两条边延长角会有什么变化_田园易经:什么样的风水环境会影响人的健康?

“气之聚&#xff0c;有水以界之&#xff0c;无风以散之。皆言风与水&#xff0c;故谓之风水”这是古人对于风水的解释。风水&#xff0c;其实是《伏羲先天六十四卦方圆图》中的一个卦&#xff0c;西晋的郭璞&#xff0c;第一次把它单独提出来&#xff0c;风水是65涣卦&#xf…