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

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. iOS创建带删除线和价钱符号的Label

    效果显示如下: 只需要子类化Label,重写DrawRect()方法即可: #import "MyLabel.h" @implementation MyLabel - (insta ...

  2. k8s中ipvs和iptables选择

    k8s 1.11.0在 centos7上不行 1.11.1之后就可以了

  3. XmlEncrypt

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. 软件测试第4周小组作业:WordCount优化

    一.基本任务:代码编写+单元测试 1.Github地址: https://github.com/Wegnery/New_WordCount 2.PSP2.1表格 PSP2.1 PSP阶段 预估耗时 ( ...

  5. 【并行计算-CUDA开发】浅谈GPU并行计算新趋势

    随着GPU的可编程性不断增强,GPU的应用能力已经远远超出了图形渲染任务,利用GPU完成通用计算的研究逐渐活跃起来,将GPU用于图形渲染以外领域的计算成为GPGPU(General Purpose c ...

  6. ZOJ Problem Set - 1002

    参考: 1.http://www.cnblogs.com/phinecos/archive/2008/09/18/1293017.html 基本思想:回溯法 重点在void Solve(int k,i ...

  7. java使用validator进行校验

    不管是html页面表单提交的对象数据还是和第三方公司进行接口对接,都需要对接收到的数据进行校验(非空.长度.格式等等).如果使用if一个个进行校验(字段非常多),这是让人崩溃的过程.幸好jdk或hib ...

  8. 进行hcmcloud 数据库备份以及设置的处理过程.

    导入数据库以及简单设置. 最近进行了一个数据库备份的简单工作: create database hcmcloud create user hcm with password 'Test6530' 执行 ...

  9. WijmoJS 中自定义 React 菜单和列表项模板

    WijmoJS 中自定义 React 菜单和列表项模板 在V2019.0 Update2 的全新版本中,React 框架下 WijmoJS 的前端UI组件功能再度增强. WijmoJS的菜单和类似列表 ...

  10. serverlet声明周期

    servlet生命周期 被创建:默认情况下,当servlet第一次被访问时,由服务器创建该对象,调用init()初始化方法,一个servlet只会被创建一次. 可以配置servlet让其他服务器启动时 ...