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完成,所以 ...
随机推荐
- smart_pointer example
#pragma oncetemplate<typename T>class smart_pointer{private: T* m_pRawPointer;public: smart_po ...
- 04Flutter仿京东商城项目 首页商品列表布局
Home.dart import 'package:flutter/material.dart'; import 'package:flutter_swiper/flutter_swiper.dart ...
- 阶段5 3.微服务项目【学成在线】_day04 页面静态化_22-页面静态化-静态化测试-静态化程序测试
测试service内些的静态化的方法 先新建一个测试类 模板的id 放到下拉的静态数据里面 这样这条数据 就是用用的轮播图005这个模板 把这条数据静态化 进入到断点里面.先获取数据模型 获取模板时 ...
- vim基础学习1---简单命令
1:vim abc:如果有abc文件,则打开,否则创建之后打开 2:输入"i",才可以输入东西 3:按Esc,它是底行模式,再敲":wq 回车" 保存退出. 4 ...
- linux安装IDEA 2017
下载 IDEA 2017 链接:http://pan.baidu.com/s/1skTKdFR 密码:yug3 解压 下载的文件 tar zxvf idea-IU-172.4155.36.tar ...
- JAVA WEB开放中的编码问题
1.getParamter获取GET方式传来的中文参数乱码 场景:A B 两端都为JAVA 所有编码都为UTF-8.GET得到的参数是乱码 原因,getParamter会将中文参数先URLDECODE ...
- 【ARTS】01_29_左耳听风-201900527~201900602
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- django 之(六) --- Celery|Admin
Celery - 分布式任务队列 简介: Celery是一个简单,灵活且可靠的分布式系统,可以处理大量消息,同时为操作提供维护该系统所需的工具.这是一个任务队列,着重于实时处理,同时还支持任务调度. ...
- Linux系统查看CPU使用率命令
在linux的系统维护中,可能需要经常查看cpu使用率,分析系统整体的运行情况.而监控CPU的性能一般包括以下3点:运行队列.CPU使用率和上下文切换. 1.top 这个命令很常用,在第三行有显示CP ...
- 《剑指offer》字符串专题 (牛客11.01)
字符串的题目难度不一,涉及到的考点有字符串处理.字符串匹配(自动机.正则).模拟,以及递归.动态规划等算法. 难度 题目 知识点 ☆ 02. 替换空格 从后往前 ☆☆ 27. 字符串的排列 回溯,St ...