一、实现多选:
步骤1:
在表格中添加一列

步骤2:
在data中定义以及数组用来存储选中的元素。例如:multipleSelection:[]

selection-change方法用户实时监听选中元素


实现效果如下:

二、实现默认选中

在获取表格数据时,添加如下方法,其中me.zclbList为获取到的表格数据列表


// 获取后台数据
    public mounted() {
        this.loadData();
    }

// 初始查询
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表格带复选框使用方法及默认选中方法的更多相关文章

  1. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  2. 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单

    jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...

  3. 关于通过jq /js 实现验证单选框 复选框是否都有被选中

    今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...

  4. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  5. 转载:Bootstrap之表格checkbox复选框全选

    转:http://blog.csdn.net/shangmingchao[商明超的博客] 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 版权声明:如需 ...

  6. Bootstrap之表格checkbox复选框全选

    效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: <table class="table table-bordered table-hov ...

  7. Jquery表格变色 复选框全选,反选

    /*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...

  8. WPF:带复选框CheckBox的树TreeView

    最近要用WPF写一个树,同事给了我一个Demo(不知道是从哪里找来的),我基本上就是参照了这个Demo. 先放一下效果图(3棵树): 这个树索要满足的条件是: 父节点.Checked=true时,子节 ...

  9. Bootstrap之表格checkbox复选框全选 [转]

    转自: http://blog.csdn.net/shangmingchao/article/details/49761315 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以 ...

随机推荐

  1. InsetDrawable

    表示把一个Drawable嵌入到另外一个Drawable的内部,并且在内部留一些间距, 类似与Drawable的padding属性,但padding表示的是Drawable的内容与Drawable本身 ...

  2. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_12-webpack研究-webpack安装

    npm默认安装配置的路径配置在nodejs的node_modules目录 j加上 -g 就是全局安装 后面只写webpack默认安装的是最新版本 指定版本号 视频中建议指定版本号进行安装

  3. mfc移动文件夹

    SHFILEOPSTRUCT FileOp; ZeroMemory((void*)&FileOp,sizeof(SHFILEOPSTRUCT)); FileOp.fFlags = FOF_NO ...

  4. Java 检查IPv6地址的合法性

    Java 检查IPv6地址的合法性 由于IPv4资源即将耗尽,IPv6将要正式启用,这是大势所趋. 一些现有的服务和应用逐步要对IPv6支持,目前还处在过渡阶段. 提前了解一些IPv6的知识,还是有必 ...

  5. 推荐一个加载动图的网站loading.io

    推荐一个非常好玩的loading gif的资源网站:https://loading.io/ 里面有各种loading的动图.

  6. Ubuntu 16.04安装MySQL设置远程访问出现问题的完美解决方案(error:10061)

    一.安装mysql 安装mysql过程中,需要设置mysql的root账号的密码,不要忽略了. sudo apt-get install mysql-server apt isntall mysql- ...

  7. matlab boundaries和fchcode函数无法执行的解决办法 未定义与 'double' 类型的输入参数相对应的函数 'boundaries'

    在测试代码时发现,自己的matlab无法执行Freeman链码函数: boundaries和fchcode函数都无法正常运行: 需要在自己的工作目录中添加如下函数: boundaries   fchc ...

  8. Git速成学习第三课:创建与合并分支

    本来第三课想记录一下远程仓库的创建与克隆0.0但是想了想还是不写了. 这里写一下分支管理中的创建与合并. Git速成学习笔记整理于廖雪峰老师的官网网站:https://www.liaoxuefeng. ...

  9. 最新 欢聚时代java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.欢聚时代等10家互联网公司的校招Offer,因为某些自身原因最终选择了欢聚时代.6.7月主要是做系统复习.项目复盘.Leet ...

  10. jquery设置input不可编辑,背景变灰,鼠标变禁止

    先看效果 $("#id").attr("onfocus", "this.blur()"); $("#id").css(& ...