直接贴代码,这是一组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状态的方法的更多相关文章

  1. python 判断矩阵中每行非零个数的方法

    python 判断矩阵中每行非零个数的方法: # -*- coding: utf-8 -*- # @Time : 2018/5/17 15:05 # @Author : Sizer # @Site : ...

  2. PyQt(Python+Qt)学习随笔:QTreeWidgetItem项中列的复选状态访问方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 树型部件QTreeWidget中的QTreeWidgetItem项,项中每列数据都可以单独设置复选状 ...

  3. 表格中每行的checkbox只能选中其中一个jquery实现

    HTML代码: <span class="number">12.</span> <div class="survey_txt mgl20&q ...

  4. 从log中分析Android wif连接状态的方法

    1.这里是从log中通过搜索关键字wpa_supplicant: wlan0: State过滤之后的log: Line 1: 11-25 20:10:14.968120  1104  1104 D w ...

  5. SQLite3中dos命令下退出"...>"状态的方法

    今天在看Android中SQLite,跟着书上一步一步走,在dos中敲命令时候不小心敲错了,命令行就会突然变成”…>”这样的,本来是”sqlite>”的,然后接下来后面的就没办法在继续操作 ...

  6. 如何在 messager/alert/confirm等消息提示框中 获取 / 设置 嵌入 html内容中的 input[type=checkbox]等的选中状态?

    总结, 有3点: 不能/不要 在 这些消息框 / 提示框/ 对话框中的 回调函数中去写代码: 获取嵌入 内容中input.checkbox的选中状态, 因为 虽然在这些框存在的时候, 这个 check ...

  7. .net dataGridView当鼠标经过时当前行背景色变色;然后【给GridView增加单击行事件,并获取单击行的数据填充到页面中的控件中】

    1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...

  8. 在datagrid中实现单击行选择整行

    首先添加列:<asp:ButtonColumn Text="选择" CommandName="Select" Visible="False&qu ...

  9. Winform 中DataGridView的checkbox列,当修改checkbox状态时实时获得其状态值

    不知道大家有没有这样的经验,当点击或者取消datagridview的checkbox列时,比较难获得其状态是选中还是未选中,进而不好进行其它操作,下面就列出它的解决办法: 主要用到了DataGridV ...

随机推荐

  1. NodeJS踩坑实录

    nodejs的常用api url 主要是配置一系列和路径相关的信息 url.parse(urlString[, parseQueryString[, slashesDenoteHost]]) 将一个U ...

  2. 2019-03-20 用SSIS把Excel中的数据导出来保存到SQLServer中

    Control Flow 1.配置 好 图形 2.去变量那 配置好 文件路径 和 存储过程 3.在SQL Server创建对应的存储过程,该存储过程的功能是每次导入是清空原有的数据 4.如果不懂的参考 ...

  3. Ajax兼容性问题

    对于IE7及以上直接使用 XMLHttpRequest 就行,但对于过老版本IE建议直接提示用户下载新版浏览器更佳.或者用以下代码兼容IE6: function CreateXHR() { if(XM ...

  4. ASP.NET-Router配置中MapRoute的参数

    App_Start文件夹中的RouteConfig MapRoute(string name,string url); MapRoute(string name,string url,object d ...

  5. ASP.NET-服务器客户端的信息保持

    ASP.NET客户端和服务器端的信息保持方案 来自为知笔记(Wiz)

  6. spring boot和maven的约定大于配置体现在哪些方面

    spring boot和maven的约定大于配置体现在哪些方面? 两者都遵从了约定大于配置的路线 约定优于配置体现点: 1.maven的目录文件结构 1)默认有resources文件夹,存放资源配置文 ...

  7. BestCoder Round #52 (div.2) HDU 5418 Victor and World (DP+状态压缩)

    [题目链接]:pid=5418">click here~~ [题目大意]: 问题描写叙述 经过多年的努力,Victor最终考到了飞行驾照. 为了庆祝这件事,他决定给自己买一架飞机然后环 ...

  8. 为powerpc交叉编译nginx

    HOST: MINT NGINX VERSION: nginx-1.8.0(nginx-1.8.0.tar.gz) ZLIB VERSION: zlib-1.2.8 PCRE VERSION: pcr ...

  9. javaScript中的事件对象event

    事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包括了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...

  10. CodeForces 176B - Word Cut 计数DP

    B. Word Cut   Let's consider one interesting word game. In this game you should transform one word i ...