element-ui 复选框,实现点击表格当前行选中或取消
背景:
1.表格结构绑定事件
<el-table
v-loading="StepsListLoading"
:data="StepsListData"
border
@row-click="StepsListRowClick"
:show-header="hiddenTableHeader"
>
2.定义复选框结构
<el-table-column>
<template slot-scope="scope">
<el-checkbox v-model="StepsListData[scope.$index].tick">{{StepsListData[scope.$index].checkName}}</el-checkbox>
</template>
</el-table-column>
数组结构
3.定义事件,实现当前表格行点击以后复选框被选中,再点击一次的时候,复选框被取消
StepsListRowClick(row){
if(row.tick == false){
row.tick = true
}else {
row.tick = false
}
},
检查的时候发现,这样会导致原有复选框的勾选事件失效,原因是表格行事件的内容与复选框事件的内容都执行了一次,所以就失效了
解决办法是去掉表格行事件,保留复选框原有的事件,为了实现点击这一行的任意位置都可以选中与取消选中的效果,可以使用css的padding属性把这一整行都占满
element-ui 复选框,实现点击表格当前行选中或取消的更多相关文章
- 你见过吗?9款超炫的复选框(Checkbox)效果
复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能.下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS ...
- [Selenium With C#基础教程] Lesson-07 复选框
作者:Surpassme 来源:http://www.jianshu.com/p/98ede43da3c3 声明:本文为原创文章,如需转载请在文章页面明显位置给出原文链接,谢谢. [作者:Surp ...
- 03 CheckBox 复选框
五 CheckBox 复选框 >概念:可以从一个集合选项中选择一个或者多个选项 >属性:checked 选择状态 >使用: > ...
- js根据选中的复选框,隐藏那一行
如图,选择复选框,点击“隐藏”按钮,隐藏选中行 1.JavaScript代码: function getCheckedIds() { var checkedSubject = $('#showSbgl ...
- 关于MUI v0.18.0版本 Table组件里的复选框不能选的解决方案
前段时间在用MUI的时候,Table组件出现复选框不能选的bug(描述: 点击复选框,点击事件会触发,复选框勾选状态无变化). 解决方法: 用CheckBox组件代替Table组件自带的复选框. 解决 ...
- angularJS批量删除 品优购删除品牌(通用复选框批量选中删除解决思路)
思路: 一步:在点击复选框时维护变量数组 在js中定义一个数组变量, 给复选框添加点击动作, 在动作中判断当前复选框是否为选中状态(即点击后复选框的是否选中状态), 若为选中状态,则向数组中添加选中的 ...
- vue2.0中ckeckbox(复选框)的使用心得,及对click事件和change的理解
最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜 ...
- javascript实现复选框的全选全不选
通过复选框的id获取到复选框 元素 对复选框绑定点击事件 每个checkbox都设置相同的name checkOne 通过得到的元素获取checkbox的状态 当点击全选全不选checkbox时,检查 ...
- Delphi DBGrid 实现复选框
1 在数据库对应的表中加入 bit 列验证是否被选中 然后dbgrid第一列的filedname是bit列 在DBgrid的onDrawColumnCell事件中写: procedure DBGri ...
随机推荐
- paper 167:GPU的使用Theano之tutorial
Theano之使用GPU 英文版本:http://deeplearning.net/software/theano/tutorial/using_gpu.html using the ...
- LOJ 2304 「NOI2017」泳池——思路+DP+常系数线性齐次递推
题目:https://loj.ac/problem/2304 看了各种题解…… \( dp[i][j] \) 表示有 i 列.第 j 行及以下默认合法,第 j+1 行至少有一个非法格子的概率,满足最大 ...
- 【靶场训练_DVWA】Command Execution
low 利用: ;ls ../../ 源码分析: <?php if( isset( $_POST[ 'submit' ] ) ) { //将ip对应的值复制给target $target = $ ...
- [CSP-S模拟测试]:虎(DFS+贪心)
题目传送门(内部题15) 输入格式 第一行一个整数$n$,代表点数接下来$n-1$行,每行三个数$x,y,z$,代表点$i$与$x$之间有一条边,若$y$为$0$代表初始为白色,否则为黑色,若$z$为 ...
- php 封装原生数据导出的方法(csv文件格式)和csv文件中长数字自动变成科学计数法的处理
如何解决上图长数字自动转换处理? CSV文件中长数字自动变成科学计数法处理.用程序导出的csv文件,当字段中有比较长的数字字段存在时,在用excel软件查看csv文件时就会变成科学计数法的表现形式. ...
- 信息安全-威胁防御系统-Fortinet:Fortinet
ylbtech-信息安全-威胁防御系统-Fortinet:Fortinet Fortinet 是多层威胁防御系统的创新者和先锋.该系统能够为业务通信提供最佳安全.优秀性能和低总体占用成本. Forti ...
- centos查看磁盘空间大小
查看磁盘空间大小 df -h 查看当前文件夹所有文件大小 du -sh 查看指定文件夹大小 du -h /data 查看指定文件夹下所有文件的大小 du -h /data/ 查看指定文件大小 du - ...
- upc组队赛14 Bus stop【签到水】
Bus Stop 题目描述 In a rural village in Thailand, there is a long, straight, road with houses scattered ...
- MongoDB简单认识
MongoDB 为何物 NoSQL 泛指非关系型数据库,该词是关系型数据库(即 SQL)的相对称呼.MongoDB 是非关系型数据库中较为人熟知的一种. 它拥有很多优秀特性,例如高性能.高可用.支持丰 ...
- mysql学习(1)----------基础语法
进入mysql mysql -u用户名 -p密码 初始用户为root 初始密码为空 status; 查看当前用户,以及数据库的字符集和其他参数的设置 set db characterset= ...