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

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. MySql锁和事务隔离级别

    在讲mysql事物隔离级别之前,我们先简单说说mysql的锁和事务. 一:数据库锁 因为数据库要解决并发控制问题.在同一时刻,可能会有多个客户端对同一张表进行操作,比如有的在读取该行数据,其他的尝试去 ...

  2. curl获取远程页面

    // 创建一个新cURL资源$ch = curl_init(); // 设置URL和相应的选项$options = array(CURLOPT_URL => 'http://www.w3csch ...

  3. mac被锁有pin码的解锁方法

    停用规律: 错误5次密码停用1分钟 再错误3次停用5分钟 在错误1次就停用15分钟 再错误1次就是60分钟了,而且还没输入框了,这时候我们要通过按 option,commond这2个按钮来唤起输入框 ...

  4. bashdb调试shell脚本

    http://note.youdao.com/noteshare?id=ef705313b714cf3a17cfe17dc80956a3

  5. MySQL数据库锁机制之MyISAM引擎表锁和InnoDB行锁详解

    转 http://blog.csdn.net/hsd2012/article/details/51112009 转 http://blog.csdn.net/e421083458/article/de ...

  6. Java集合(1):Collections工具类中的static方法

    与Arrays一样,Collections类中也有一些实用的static方法. (1) 排序操作 reverse(List list):反转指定List集合中元素的顺序 shuffle(List li ...

  7. 【Hadoop】MapReduce练习:多job关联实现倒排索引

    概述 倒排索引(英语:Inverted index),也常被称为反向索引.置入档案或反向档案,是一种索引方法,被用来存储在全文搜索下某个单词在一个文档或者一组文档中的存储位置的映射.它是文档检索系统中 ...

  8. vue/cli 3.0配置NODE_ENV

    原文地址 在项目开发中我们需要配置环境变量,开发环境,生产环境和测试环境.在cli 2.0的版本中我们是通过在config文件夹进行配置的,vue/cli 3.0相对简单,只需要在项目根目录创建.en ...

  9. python基础知识(循环语句)

    for循环.while循环.循环嵌套 for 迭代变量 In 对象: 循环体 range(start,end,step) 第一个和第三个可以省略生成一系列的连续整数 start 包括起始值 end  ...

  10. Git速成学习第一课:创建版本库与版本回退

    Git速成学习笔记整理于廖雪峰老师的官网网站:https://www.liaoxuefeng.com/ 我太困了0.0精神点再写...... /*我来啦!以后会陆续更新自己的学习笔记*/ Git是分布 ...