在做项目的时候会碰到一些表格操作的问题其中我归整了一下有关于多选功能的一些记录

一:默认选中其中一行

<el-table
class="editTable"
:data="list && list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
border
ref="multipleTable"
@selection-change="selectionChange"
v-loading="loading">
</el-table>
this.$refs.multipleTable.toggleRowSelection(this.$refs.multipleTable.data[0],true);

二:触发清空所有选中状态

this.$refs.multipleTable.clearSelection();

三:分页选中记录所有选中状态携带记忆功能(表格数据过多需要分页)

:row-key="(row) => row.id"  和  多选 column 添加记忆功能 :reserve-selection="true"
<el-table
class="editTable"
:data="list && list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
border
ref="multipleTable"
:row-key="(row) => row.id"
@selection-change="selectionChange"
v-loading="loading"> <el-table-column
:type="type"
:reserve-selection="true">
</el-table-column> </el-table>

-----有新的随时更新 2021/7/9

vue+element el-table有关Checkbox的一些功能的更多相关文章

  1. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  2. 封装Vue Element的table表格组件

    上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...

  3. vue+element ui table组件封装,使用render渲染

    后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...

  4. vue + element ui table表格二次封装 常用功能

    因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data=&qu ...

  5. 封装Vue Element的可编辑table表格组件

    前一段时间,有博友在我那篇封装Vue Element的table表格组件的博文下边留言说有没有那种"表格行内编辑"的封装组件,我当时说我没有封装过这样的组件,因为一直以来在实际开发 ...

  6. 封装Vue Element的form表单组件

    前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...

  7. vue+element实现分页--之--前端分页

    效果图: 访问的数据量小,一次返回所有数据,再次利用elementUI-Table 和el-pagination组件进行展示,关键点事数据的筛选 官网的完整案例 <div class=" ...

  8. Vue. 之 Element获取table中选中的行

    Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...

  9. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

  10. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

随机推荐

  1. USB转UART的桥接控制器 国产DPU02软硬件兼容替换CP2102

    DPU02是一个高度集成的USB转UART的桥接控制器,可将RS-232设计更新为USB设计,并简化PCB组件空间.该DPU02包括了一个USB 2.0全速功能控制器.USB收发器.振荡器.EEPRO ...

  2. 【Java学习Day10】类型转换

    类型转换 由于Java是强类型语言,所以要进行某些运算的时候,需要用到类型转换 低------------------------------------------>高 byte-->s ...

  3. php textarea根据回车转换成数组

    $val是textarea文本框的内容 假如是:张三/32岁/男 李四/28岁/男 $arr=explode("\n",$val); $arr2 = array(); foreac ...

  4. js获取父节点的方式

    js获取父节点的方式: 1.parentNode获取父节点 获取的是当前元素的直接父元素.parentNode是w3c的标准. var p = document.getElementById(&quo ...

  5. windwos 系统打补丁后重启不了处理方案

    如果可以进入WinRE这个修复的高级选项,选择安全模式,是否可以进入,卸载最近安装的补丁,再重启看一下. 如果无法进入安全模式的话,那么选择cmd模式,使用下方命令.这通常会回退pending的upd ...

  6. python中的KeyError报错

    from util import str_util #业务逻辑:兼容不同的结构体:resCode转化数据 #检查字典中是否存在键 if 'resCode' not in resultJson if ' ...

  7. vue3导出功能

    proxy.$axios.own.get(url,{ responseType: 'blob' //首先设置responseType字段格式为 blob}).then(res => { let ...

  8. 蓝桥杯训练赛二-1141 问题 C: C语言训练-百钱百鸡问题

    题目描述 中国古代数学家张丘建在他的<算经>中提出了著名的"百钱买百鸡问题":鸡翁一,值钱五,鸡母一,值钱三,鸡雏三,值钱一,百钱买百鸡,问翁.母.雏各几何? 输入 无 ...

  9. firewalld 防火墙centos7

    在centos7中iptables已经废弃不用 firewalld命令: 查看所有规则 firewall-cmd  --list-all 用命令行 来 允许40ip 访问本机 firewall-cmd ...

  10. db2iupgrade / db2ckupgrade failure due to SQL0551N

    db2iupgrade / db2ckupgrade failure due to SQL0551N Troubleshooting Problem db2iupgrade or db2ckupgra ...