vue - 列表显示(列互相影响,全选控制,更新数据)
要实现的效果为:全选,且列A列B互相影响,列B勾选则列A一定勾选,列A取消勾选,则相应列B取消勾选
数组
vue中列表渲染有些不是响应式的
var list=[
{
a:'aaaa',
b:'ddd'
A:'1',//勾选
B:'0'//不勾选
},
{
a:'bbb',
b:'cccc'
A:'1',//勾选
B:'1'//勾选
},
]
- 单个数组中的一项更新(更新数据及视图)
//新增属性及视图更新
var index = 1;
var item = list[index];
item.A=1;
item.B=0;
this.$set(this.list, index, item);
2.整个数组更新
//var data = JSON.parse(JSON.stringify(this.list)); //深克隆原数组 一般用于克隆对象
//var data = Object.assign({}, this.list); //浅拷贝 不起作用
var data =this.device;//数组直接赋值即可
data.forEach(item => {
item.a = 1;
item.b = 1;
});
this.list = data;
3.全选
将全选按钮的数组绑定在vue的computer属性中
All() {
var data = {
A_all: true, //A全选
B_all: true //B全选
};
this.list.forEach(item => {
//如果有一个A未勾选,'全选A_all'不勾选
if (item.A == 0) {
data.A_all = false;
}
//如果有一个B未勾选,'全选B_all'不勾选
if (item.B == 0) {
data.B_all = false;
}
});
return data;
}
最后上一下效果图:
vue - 列表显示(列互相影响,全选控制,更新数据)的更多相关文章
- jquery控制动态生成的gridview中多列checkbox的全选反选及自动判断是否全选状态
动态生成的Gridview的前台html代码如下: <table class="usertableborder" cellspacing="0" ...
- Vue.js实现checkbox的全选和反选
小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...
- vue.js 批量删除跟全选,反选效果
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- vue结合element-ui 的select 全选问题
下拉列表多选 问题 通过操作 所有来进行全选 全不选问题 element-ui 中 select 记录下自己最近使用element-ui 中的 select多选问题 在element中默认是指单纯多选 ...
- vue开发购物车,解决全选单选问题
实现全选单选,在vue中无法通过this获取input中的checkbox的checked属性,但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定,同样也可以通过这种方式实现购 ...
- vue实现下拉框全选和输入匹配
实际项目中的一个需求: 点击文本框,弹出带有复选框的选项,然后获取选中项的数据,传给后面的一个功能.在文本框输入内容,也会动态的匹配下拉列表,并且列表带有全选功能. 朴素的效果图: 我选择了用vue实 ...
- vue+vant实现购物车的全选和反选业务,带你研究购物车的那些细节!
前言 喜欢购物的小伙伴看过来,你们期待已久的购物车来啦!相信小伙伴逛淘宝时最擅长的就是加入购物车了,那购物车是如何实现商品全选反选的呢?今天就带你们研究购物车的源码,以vue+vant为例. 正文 首 ...
- DataGridView里CheckBox实现全选控制
1. checkbox点击事件 private void myStyleDataGridView1_CellClick(object sender, DataGridViewCellEventArgs ...
- 使用vue.js实现checkbox的全选和多个的删除功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
随机推荐
- python语法_字符串
字符串 a = 'asdb' #双引号和打印号没区别, 操作 "abc"*2 打印两遍"abc" #字符串 加* 重复打印字符串 “abc”[2:1] #切片 ...
- [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed
1.在vs编写时出现这个问题(以下为网络查询结果) 问题的原因是“SSL: CERTIFICATE_VERIFY_FAILED”. Python 升级到 2.7.9 之后引入了一个新特性,当使用url ...
- Java中的字符串截取(substring)的使用
import java.util.*; public class ZiFu { public static void main(String args[]){ System.out.println(& ...
- centos6.8 编译安装lnmp php7.2 mysql5.6 nginx1.1.4
编译操作参考版,没有每一步详细操作,慎入 关闭selinux和防火墙 service iptables stop chkconfig iptables off vi /etc/selinux/conf ...
- 一、大体认识jspxcms
声明:jspxcms的license写明,允许将jspxcms用于商业和非商业用途.此处只是作为研究.分享使用心德,并不涉及商用. 使用版本:jspxcms 9.5.0 一.下载源码,并部署到ecl ...
- iOS上传图片和视频(base64和file)
前言:iOS开发中经常会使用到图片和视频上传及保存到相册,下面我讲介绍视频图片的两种上传服务器的方法.以阿里云的OSS服务器为例. 友情提示:上传图片方法在APP中使用很广泛,最好单独写一个图片上传的 ...
- 70个Python练手项目列表(都有完整教程)
前言: 不管学习那门语言都希望能做出实际的东西来,这个实际的东西当然就是项目啦,不用多说大家都知道学编程语言一定要做项目才行. 这里整理了70个Python实战项目列表,都有完整且详细的教程,你可以从 ...
- Python super初始化理解过程
# -*- coding:utf-8 -*-<br data-filtered="filtered"> class A(object): def __init__(se ...
- SQL SERVER-时间戳(timestamp)与时间格式(datetime)互相转换
SQL里面有个DATEADD的函数.时间戳就是一个从1970-01-01 08:00:00到时间的相隔的秒数.所以只要把这个时间戳加上1970-01-01 08:00:00这个时间就可以得到你想要的时 ...
- 使用Apache JMeter对SQL Server、Mysql、Oracle压力测试(四)
这篇文章是对前面三篇的一个总结: 1.从测试结果来看,原生的数据库性能分别是:SQL Server(4587)>Oracle(271)>Mysql(145),测试数据量分别为5W.50W. ...