element table切换分页不勾选的自带方法
场景一:没有回显勾选的情况
table表格加row-key标识选中行唯一标识,多选框加reserve-selection设置为true
<template>
<el-table
v-loading="loading"
ref="multipleTable"
tooltip-effect="dark"
:row-key="getRowKey">
<el-table-column label="" type="selection" width="50" align="center" :reserve-selection="true"></el-table-column>
</table>
</template>
场景二:有回显勾选情况
<template>
<el-table v-loading="loading"
ref="multipleTable"
:data="tableData"
@select="onTableSelect"
@select-all="onTableSelectAll"
tooltip-effect="dark">
<template>
<script type="text/javascript">
methods: {
// 取消默认选中项(单个勾选)
/**
*@list 接口返回的默认勾选数组
*@id 列表唯一标识
*/
onTableSelect (rows, row) {
if (!rows.includes(row)) {
const index = this.list.findIndex(item =>
item.id=== row.id)
this.list.splice(index, 1)
} else {
this.list.push(row)
}
},
// 全选操作
onTableSelectAll (arr) {
if (!arr.length) { // 直接取消选中全部
this.tableData.forEach((v) => {
const index = this.list.findIndex(i =>
i.id === v.id)
if (index !== -1) {
this.list.splice(index, 1)
}
})
} else { // 直接选中全部
this.tableData.forEach((v) => {
const index = this.list.findIndex(i =>
i.id=== v.id)
if (index === -1) {
this.list.push(v)
}
})
}
}
}
<script>
element table切换分页不勾选的自带方法的更多相关文章
- bootstrap-table 切换页码保留勾选的checkbox
首先该方法除了需要引入bootstrap库和bootstrap-table外,还需要引入一个工具库js:lodash.js 点我 使用时在jquery.min.js.bootstrap.min. ...
- vue ele table表格 设置只能勾选一个
table 更改属性设置: <el-table ref="multipleTable" :data="tableData" tooltip-effect= ...
- element ui中表格table翻页记忆勾选状态
<el-table ref="multipleTable" :data="datalist" style="width:100%" @ ...
- element table固定表头,表的高度自适应解决方法
主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="ta ...
- layui table 分页 记住之前勾选的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能
业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
- Jquery 表格操作,记录分页情况下,每一页中被用户勾选的信息
如下图,一个分页列表,用户可以随意勾选一条或多条信息,然后进行某种操作,如“提交”.但是有个问题:如果勾选了一条信息之后,点[下一页],那么上一页 勾选的条目被刷新掉了. 问题:如果用户需要在第1页, ...
- JQuery实现表格的全选和反选,以及分页勾选保存(laypage插件分页的使用)
需求: 1.全选与取消全选 2.单个勾选,点击表格单元格中checkbox勾选,也可以在点击行勾选,便与用户操作 3.分页勾选保存 4.固定表头 功能一: 说明:操作全选按钮的同时,遍历每一个tr中的 ...
- Ext grid checkbox 分页 翻页 勾选 问题
timeArray = new Array(); //临时数组变量 var timeStatusBar = new Ext.ux.StatusBar({ id: 'statusbar', defaul ...
随机推荐
- HttpClient提交数据
用代码模拟浏览器的行为 * 轻量级的开源的框架 * Android在6.0 23 以后移除了httpclient ,所以开发中用的少了 * 编写步骤: 1. 打开浏览器 2. 输入网址 3. 敲回车 ...
- 07 MySQL之视图
01-视图的含义 视图是从一个或者多个表中导出的,视图的行为与表非常相似,但视图是一个虚拟表.视图还可以从已经存在的视图的基础上定义. 02-创建视图 # 基本语法格式: CREATE [OR REP ...
- springboot自定义filter获取spring容器bean对象
今天在自己定义的filter中,想要直接注入spring容器的其它bean进行操作,发现不能正常的注入: 原因:web容器加载顺序导致, 加载顺序是listener——filter——servlet, ...
- python中学习K-Means和图片压缩
python中学习K-Means和图片压缩 大家在学习python中,经常会使用到K-Means和图片压缩的,我们在此给大家分享一下K-Means和图片压缩的方法和原理,喜欢的朋友收藏一下吧. 通俗的 ...
- iis管理器的程序应用池中没有Asp.NET v4.0
然后 windows + r 输入 cmd 然后输入CD C:\Windows\Microsoft.NET\Framework64\v4.0.30319 然后 输入 aspnet_regiis.exe ...
- js 笔记整理
Js中for.for-in.forEach以及for-of的用法及特性对比 for-in for...in以任意顺序遍历一个对象的可枚举属性.所以for-in不适合用来迭代一个Array.同时,for ...
- python3 速查参考- python基础 8 -> 面向对象基础:类的创建与基础使用,类属性,property、类方法、静态方法、常用知识点概念(封装、继承等等见下一章)
基础概念 1.速查笔记: #-- 最普通的类 class C1(C2, C3): spam = 42 # 数据属性 def __init__(self, name): # 函数属性:构造函数 self ...
- 安装 maven
1.打开http://maven.apache.org/index.html 2.选择USE,点击下载 3.下移窗口到File点击红框内的链接 4.将下载的压缩包解压到c:\apps 5.将maven ...
- Photon Server初识(一) ---C#链接MySql
环境: 1.MAC电脑,JetBrains Rider编辑器 2.本地MySql5.7 (开始安装8.1发现使用 NHibernate 映射链接不上) 一.新建工程 二.引入dll包(MySQL.Da ...
- 树莓派3b 串口乱码的一个解决思路
首先确认波特率设置正确,为115200 向microSD卡中烧录树莓派官方的镜像后,先不要急着把它插入树莓派中. 在电脑上打开microSD卡,按如下方式修改config.txt和cmdline.tx ...