场景一:没有回显勾选的情况

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>
<script>
  methods: {
  // 指定一个key标识这一行的数据
    getRowKey (row) {
      return row.id
    }
  }
</script>

场景二:有回显勾选情况

<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切换分页不勾选的自带方法的更多相关文章

  1. bootstrap-table 切换页码保留勾选的checkbox

    首先该方法除了需要引入bootstrap库和bootstrap-table外,还需要引入一个工具库js:lodash.js    点我 使用时在jquery.min.js.bootstrap.min. ...

  2. vue ele table表格 设置只能勾选一个

    table 更改属性设置: <el-table ref="multipleTable" :data="tableData" tooltip-effect= ...

  3. element ui中表格table翻页记忆勾选状态

    <el-table ref="multipleTable" :data="datalist" style="width:100%" @ ...

  4. element table固定表头,表的高度自适应解决方法

    主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="ta ...

  5. layui table 分页 记住之前勾选的数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

  7. Jquery 表格操作,记录分页情况下,每一页中被用户勾选的信息

    如下图,一个分页列表,用户可以随意勾选一条或多条信息,然后进行某种操作,如“提交”.但是有个问题:如果勾选了一条信息之后,点[下一页],那么上一页 勾选的条目被刷新掉了. 问题:如果用户需要在第1页, ...

  8. JQuery实现表格的全选和反选,以及分页勾选保存(laypage插件分页的使用)

    需求: 1.全选与取消全选 2.单个勾选,点击表格单元格中checkbox勾选,也可以在点击行勾选,便与用户操作 3.分页勾选保存 4.固定表头 功能一: 说明:操作全选按钮的同时,遍历每一个tr中的 ...

  9. Ext grid checkbox 分页 翻页 勾选 问题

    timeArray = new Array(); //临时数组变量 var timeStatusBar = new Ext.ux.StatusBar({ id: 'statusbar', defaul ...

随机推荐

  1. 提高 python 效率的一些细节方式

    在列表里面计数 性能:第二种计数方法比第一种快6290倍,为啥因为Python原生的内置函数都是优化过的,所以能用原生的计算的时候,尽量用原生的函数来计算. 过滤一个列表 性能:第二种方法比第一种慢近 ...

  2. 010-数据结构-树形结构-B树[B-树]

    一.概述 B 树就是常说的“B 减树(B- 树)”,又名平衡多路(即不止两个子树)查找树. 在计算机科学中,B树(英语:B-tree)是一种自平衡的树,能够保持数据有序.这种数据结构能够让查找数据.顺 ...

  3. Kettle源码学习(一)——把Kettle项目跑起来

    kettle(pentaho data integration),是一款开源的C/S版的ETL工具,最近打算学习一下kettle源码,并自己写一个mini kettle,并改造成基于事件触发的流处理模 ...

  4. Rancher Server部署方式及Rancher HA环境部署

    类似Rancher这种的容器管理和编排工具,它可以很快地让每个组织获得高效的弹性集群管理能力.当前技术世界的发展形势就是让开发人员从繁琐的应用配置和管理中解放出来,使用容器镜像来处理复杂的程序运行依赖 ...

  5. linux简单命令9--yum安装软件

    +

  6. 如何写resultful接口

    一.协议 API与客户端用户的通信协议,总是使用HTTPS协议,以确保交互数据的传输安全. 二.域名 应该尽量将API部署在专用域名之下: https://api.example.com 如果确定AP ...

  7. Masonry创建Label,不设置高度Label不显示问题

    [self.contentLabel mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(weanSelf).off ...

  8. 同步pod容器内时区

    同步pod容器内时区 .直接修改镜像的时间设置,好处是应用部署时无需做特殊设置,但是需要手动构建Docker镜像. .部署应用时,单独读取主机的“/etc/localtime”文件,即创建pod时同步 ...

  9. loadrunner脚本因为没有token报错

    目录 场景 解决过程 解决方案 总结 场景 用loadrunner11录制脚本,处理后回放,加上检查点,报错找不到检查点对应的内容,去掉检查点,没有报错,但是打开页面没有该操作的痕迹.手动在页面上操作 ...

  10. 菜鸟系列Fabric——Fabric 私密数据(6)

    Fabric 私密数据 1.私密数据的定义 如果某个渠道上的一组组织需要将数据与该渠道上的其他组织保密,他们可以选择创建一个仅包含需要访问数据的组织的新渠道.但是,在每种情况下创建单独的通道会产生额外 ...