iview中单击行，使得checkbox状态的方法
直接贴代码，这是一组jquery全选，全不选，反选代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue/vue.js"></script>
<script src="../vue/iview/js/iview.min.js"></script>
<link rel="stylesheet" href="../vue/iview/css/iview.css">
</head>
<body>
<div id="app">
<i-table :columns="col" :data="data" @on-row-click="handlerClicked"></i-table>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
col: [
{
align: 'center',
title: '选项',
key: 'flag',
render: (h, params) => {
return h('Checkbox', {
props: {
value: params.row.flag
}
})
}
},
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age'
}
],
data: [
{
name: '小明',
age: 11,
flag: false
},
{
name: '小明1',
age: 12,
flag: true
}
]
}
},
methods: {
handlerClicked(val) {
this.data.forEach(function (item) {
let { name, age, flag } = item
if (name === val.name && age === val.age && flag === val.flag) {
item.flag = !item.flag
}
})
}
}
})
</script>
</body>
</html>
思路是这样的:
- 不使用iview默认的type中的selection，使用render函数来渲染checkbox选型。
- 在data中定义flag来决定checkbox中的状态。
- 监听row的on-row-click事件，获取当前行的数据，然后依次对data中的数据做对比，然后修改对应row中的flag状态。
原文地址：https://segmentfault.com/a/1190000012878643
iview中单击行，使得checkbox状态的方法的更多相关文章
- python 判断矩阵中每行非零个数的方法
python 判断矩阵中每行非零个数的方法: # -*- coding: utf-8 -*- # @Time : 2018/5/17 15:05 # @Author : Sizer # @Site : ...
- PyQt（Python+Qt）学习随笔：QTreeWidgetItem项中列的复选状态访问方法
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 树型部件QTreeWidget中的QTreeWidgetItem项,项中每列数据都可以单独设置复选状 ...
- 表格中每行的checkbox只能选中其中一个jquery实现
HTML代码: <span class="number">12.</span> <div class="survey_txt mgl20&q ...
- 从log中分析Android wif连接状态的方法
1.这里是从log中通过搜索关键字wpa_supplicant: wlan0: State过滤之后的log: Line 1: 11-25 20:10:14.968120 1104 1104 D w ...
- SQLite3中dos命令下退出"...>"状态的方法
今天在看Android中SQLite,跟着书上一步一步走,在dos中敲命令时候不小心敲错了,命令行就会突然变成”…>”这样的,本来是”sqlite>”的,然后接下来后面的就没办法在继续操作 ...
- 如何在 messager/alert/confirm等消息提示框中 获取 / 设置 嵌入 html内容中的 input[type=checkbox]等的选中状态?
总结, 有3点: 不能/不要 在 这些消息框 / 提示框/ 对话框中的 回调函数中去写代码: 获取嵌入 内容中input.checkbox的选中状态, 因为 虽然在这些框存在的时候, 这个 check ...
- .net dataGridView当鼠标经过时当前行背景色变色；然后【给GridView增加单击行事件，并获取单击行的数据填充到页面中的控件中】
1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...
- 在datagrid中实现单击行选择整行
首先添加列:<asp:ButtonColumn Text="选择" CommandName="Select" Visible="False&qu ...
- Winform 中DataGridView的checkbox列，当修改checkbox状态时实时获得其状态值
不知道大家有没有这样的经验,当点击或者取消datagridview的checkbox列时,比较难获得其状态是选中还是未选中,进而不好进行其它操作,下面就列出它的解决办法: 主要用到了DataGridV ...
随机推荐
- node——post提交新闻内容
获取用户post提交的数据分多次提交,因为post提交数据的时候,数据量可能比较大,会要影响服务器中获取用户所以.提交的所有数据,就必须监听request事件.那么,什么时候才表示浏览器把所有数据提交 ...
- python之类与对象属性的增删改查
类属性与对象属性的增删改查 类属性的增删改查 class School: """ 文档 """ Teacher = "老王&quo ...
- 亲历：IT 从业者避免猝死攻略 v1.0
作者:香蕉痞 出处:http://www.geekpark.net/read/view/191188?u=0 亲历:IT 从业者避免猝死攻略 v1.0 By 香蕉痞 | 2013/10/28 [核心提 ...
- 51nod 1113 矩阵快速幂（ 矩阵快速幂经典模板 ）
1113 矩阵快速幂 链接:传送门 思路:经典矩阵快速幂,模板题,经典矩阵快速幂模板. /******************************************************* ...
- centos7下部署FastDFS分布式文件系统
前言 项目中用到文件服务器,有朋友推荐用FastDFS,所以就了解学习了一番,感觉确实颇为强大,在此再次感谢淘宝资深架构师余庆大神开源了如此优秀的轻量级分布式文件系统,本篇文章就记录一下FastDFS ...
- STM32 软件复位并模拟USB拔插
最近做了个USB跟上位机的通信,需要软件对MCU进行复位,复位后如果USB没有拔插,PC就不会重新枚举USB为了解决这个问题,我做了软件复位跟,软件模拟USB拔插. 这里我用的是HAL库的软件复位,复 ...
- ubuntu设置PATH
试了好多遍,多无效.. 最后在/etc/enviroment下设置才有效. 不过让有一些未解问题 我使用sudo su 进入到root用户权限,设置完成的. 重新使用sudo -s进入root用户权限 ...
- POJ——T2352 Stars
http://poj.org/problem?id=2352 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 46592 ...
- ACM这一路
出自自己内心的声音. 大学已经读了一年,自己也老了一岁. 从開始的什么都不懂,到如今的懂了也不想多说什么,说多了也是累.在大学其中唯一还在执着的是ACM.这个也是我唯一能执着的东西,由 ...
- Javaee 应用分层架构
应用分层的优点:修改方便,仅修改有问题的那层以及其相邻几层即可,层数越多,其相应的资源分配也会更加平均 缺点:耗费时间,速度慢,调用占用大量堆栈. JAVAEE的分层: 4层分法:1.客户层:运行在客 ...