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 ...
随机推荐
- Callable和Supplier的区别
A Callable is "A task that returns a result, while a Supplier is "a supplier of results&qu ...
- jmeter 执行python脚本的方法 。(亲测ok)
jmeter 执行python脚本 jmeter 可以通过Jython 执:行python代码 1.下载Jython jar包:http://www.jython.org/downloads.ht ...
- 编解码原理,Python默认解码是ascii
编解码原理,Python默认解码是ascii 首先我们知道,python里的字符默认是ascii码,英文当然没问题啦,碰到中文的时候立马给跪. 不知道你还记不记得,python里打印中文汉字的时候需要 ...
- 硬盘相关合集,以及LVM操作实践
1. 机器装有两块硬盘,重装系统只找到一块盘,如何解决? 正常装完系统后,运行: a. lsblk查看硬盘信息,这里可以发现还没有使用的另一块盘. b. fdisk或parted给硬盘分区,取决于硬盘 ...
- Git分块提交文件
用 git add 命令,只不过要加上 -p 这个参数,带上要add的文件 先看这个文件的变化,修改,删除一行(换为空行),新增加一行. 下面就介绍如何只提交最后一个区块(hunk) sourcet ...
- phpstudy批量getshell工具
phpstudy批量getshell工具,最新phpstudygetshell,配合精确采集实现每天轻松上万! 详情可加QQ:1743685523
- 图文详解 : 什么是版本控制?Eclipse配置SVN和IDEA配置GIT教程
前言 虽然在工作中, VCS已然配置妥当, 我们敲好的业务只需要Commit&push提交就好, 但是不妨碍我们了解什么是版本控制, 为什么要使用这类工具? ps.最近项目里的小伙伴想在自己家 ...
- Java垃圾收集器与内存分配策略
程序的计数器.虚拟机栈.本地方法栈3个区域随线程而生,随线程而灭:栈中的栈侦随着方法的进入和退出而有条不紊地执行出栈和如栈操作. 判断对象是不是已经死亡的方法: 一.引用计数算法: 给对象添加一个引用 ...
- linux ctrl 快捷键
ctrl+a: 光标跳到行首. ctrl+b: 光标左移一个字母. ctrl+c: 杀死当前进程. ctrl+d: 删除光标后一个字符或exit.logout. ctrl+e: 光标移到行尾. ctr ...
- 3道入门字典树例题,以及模板【HDU1251/HDU1305/HDU1671】
HDU1251:http://acm.hdu.edu.cn/showproblem.php?pid=1251 题目大意:求得以该字符串为前缀的数目,注意输入格式就行了. #include<std ...