element-ui表格带复选框使用方法及默认选中方法
一、实现多选:
步骤1:
在表格中添加一列
步骤2:
在data中定义以及数组用来存储选中的元素。例如:multipleSelection:[]
selection-change方法用户实时监听选中元素
实现效果如下:

二、实现默认选中
在获取表格数据时,添加如下方法,其中me.zclbList为获取到的表格数据列表
// 初始查询
public loadData() {
// 提交获取返回数据
let that: any = this;
AuditApi.getAuditItemList({status: 1}).then( (responseJSON: any) => {
this.auditItemList = responseJSON;
that.$nextTick(()=> {
that.toggleSelection(that.auditItemList);
});
});
}
定义ref="table",用来获取该表格
public toggleSelection(rows: any) {
let that: any = this;
if (rows) {
rows.forEach((item: any) => {
//设置该表格选框选中
that.$refs.table.toggleRowSelection(item);
});
} else {
that.$refs.table.clearSelection();
}
}
即可实现默认选中。

element-ui表格带复选框使用方法及默认选中方法的更多相关文章
- jquery完成带复选框的表格行高亮显示
jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...
- 关于通过jq /js 实现验证单选框 复选框是否都有被选中
今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
- 转载:Bootstrap之表格checkbox复选框全选
转:http://blog.csdn.net/shangmingchao[商明超的博客] 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 版权声明:如需 ...
- Bootstrap之表格checkbox复选框全选
效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: <table class="table table-bordered table-hov ...
- Jquery表格变色 复选框全选,反选
/*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...
- WPF:带复选框CheckBox的树TreeView
最近要用WPF写一个树,同事给了我一个Demo(不知道是从哪里找来的),我基本上就是参照了这个Demo. 先放一下效果图(3棵树): 这个树索要满足的条件是: 父节点.Checked=true时,子节 ...
- Bootstrap之表格checkbox复选框全选 [转]
转自: http://blog.csdn.net/shangmingchao/article/details/49761315 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以 ...
随机推荐
- git如何压栈某一个文件?
答: 使用git stash -p进行交互式操作,y表示压栈,n表示不压栈
- oracle-游标-存储过程-函数-包
一.存储过程 不可以在insert,update,delete中直接使用,可以有return但代表的是退出过程 过程有三种类型:不返回值,可以返回多个值,参数有三种类型,分别如下: in:只输入,不返 ...
- 15 Flutter BottomNavigationBar自定义底部导航条 以及实现页面切换 以及模块化
效果: /** * Flutter BottomNavigationBar 自定义底部导航条.以及实现页面切换: * BottomNavigationBar是底部导航条,可以让我们定义底部Tab ...
- 电力项目十一--js添加浮动框
1.添加浮动窗口样式 <!-- 浮动窗口样式css begin --> <style type="text/css"> #msg_win{border:1p ...
- subprocess以及常用的封装函数
从Python 2.4开始,Python引入subprocess模块来管理子进程,以取代一些旧模块的方法:如 os.system.os.spawn.os.popen.popen2..commands. ...
- 生产者-消费者问题与quene模块
生产者-消费者问题与quene模块 下面使用线程锁以及队列来模拟一个典型的案例:生产者-消费者模型.在这个场景下,商品或服务的生产者生产商品,然后将其放到类似队列的数据结构中,生产商品的时间是不确定的 ...
- Linux Shell列出网络中所有的活跃主机
因为的的网段是 192.168.1.0/24 , 所以我只需遍历 192.168.1.1 到 192.168.1.255 之间的所有ip然后进行 ping 就可以了: test.sh: #!/bin/ ...
- Spring Boot连接DB2查询结果时报错“java.lang.AbstractMethodError: com.ibm.db2.jcc.t4.b.isValid(I)Z”的解决办法
关于在maven项目中如何添加DB2的坐标的详细,见:https://www.cnblogs.com/zifeiy/p/7918554.html Spring Boot项目中的application. ...
- Spring Aop(十四)——Aop自动创建代理对象的原理
转发地址:https://www.iteye.com/blog/elim-2398725 Aop自动创建代理对象的原理 我们在使用Spring Aop时,通常Spring会自动为我们创建目标bean的 ...
- 神经网络(NN)实现多分类-----Keras实现
IRIS数据集介绍 IRIS数据集(鸢尾花数据集),是一个经典的机器学习数据集,适合作为多分类问题的测试数据,它的下载地址为:http://archive.ics.uci.edu/ml/machi ...