实现效果如图

数据格式如下:

pps: [{"code":"6","createTime":"2018-09-07 00:00:00","des":"可选择居住情况","id":"6","key":"liveType","multi":false,"name":"居住情况","no":1,"status":1,"updateTime":"2018-09-07 00:00:00","usages":["condition"],"values":[{"code":"6.1","createTime":"2018-09-07 00:00:00","id":"601","name":"纯老人家庭","no":1,"propertyId":"6","status":1,"updateTime":"2018-09-27 16:53:57"},{"code":"6.3","createTime":"2018-09-07 00:00:00","id":"603","name":"独居老人","no":3,"propertyId":"6","status":1,"updateTime":"2018-09-27 16:54:06"}]},{"code":"f","createTime":"2018-09-07 00:00:00","des":"老人经济状况","id":"15","multi":true,"name":"经济状况","no":2,"status":1,"updateTime":"2018-09-07 00:00:00","usages":["condition"],"values":[{"code":"f.1","createTime":"2018-09-29 14:18:30","id":"1501","name":"低保","no":1,"propertyId":"15","status":1,"updateTime":"2018-09-29 14:18:30"},{"code":"f.2","createTime":"2018-09-29 14:18:36","id":"1502","name":"低收入","no":2,"propertyId":"15","status":1,"updateTime":"2018-09-29 14:18:36"}]}]

核心代码如下:

数据请求并初始化

  API.property.listByUsage(this.usage).then(res => {
console.log('got properties', res.data)
// const data = res.data.data
var pps = res.data.data
if (this.multi) {
for (var i = 0; i < pps.length; i++) {
var propCode = pps[i].code
if (!this.result[propCode]) {
this.$set(this.result, propCode, [])
this.$set(this.checkAll, propCode, false)
// this.result[propCode] = []
}
}
}
this.pps = pps
console.log('pps:', JSON.stringify(this.pps))
})

数据加工方法如下:

cheakLength(code) {
for (var i = 0; i < this.pps.length; i++) {
if (this.pps[i].code === code) {
if (this.result[code].length === this.pps[i].values.length) {
this.checkAll[code] = true
} else {
this.checkAll[code] = false
}
}
}
},
handleCheckAllChangeProps(code) {
var ppsValues = []
for (var i = 0; i < this.pps.length; i++) {
if (this.pps[i].code === code) {
this.pps[i].values
for (var j = 0; j < this.pps[i].values.length; j++) {
ppsValues.push(this.pps[i].values[j].code)
}
this.result[code] = this.checkAll[code] ? ppsValues : []
}
}
}, handleCheckAllChange(val) {
const streetValue = []
for (var i = 0; i < this.streetsList.length; i++) {
streetValue.push(this.streetsList[i].value)
}
this.streets = val ? streetValue : []
this.streetIsIndeterminate = false
},

数据渲染pug格式参考el-checkbox 全选:

 .col-12.py-2.df-row-as-jsta
.d-inline-block.label.mr-3.text-right 所属街道:
el-checkbox(:indeterminate="streetIsIndeterminate", v-model="streetCheckAll", @change="handleCheckAllChange") 全选
el-checkbox-group.ml-4(v-model="streets")
el-checkbox(v-for="item in streetsList", :key="item.value", :label="item.value", :value="item.value") {{ item.name}} .col-12.py-2.df-row-as-jsta(v-for='prop in pps' :key="prop.code")
.d-inline-block.label.mr-3.text-right {{ prop.name }}:
el-checkbox.mr-3(v-model="checkAll[prop.code]" @change="handleCheckAllChangeProps(prop.code)") 全部
el-checkbox-group.d-inline-block.d-flex.flex-row.flex-wrap(v-model="result[prop.code]", @change="cheakLength(prop.code)")
el-checkbox(v-for="item in prop.values" :key="item.code" :label="item.code") {{ item.name}}

粗体为核心代码

vue-element 动态单选多选全选的更多相关文章

  1. vue Element动态设置el-menu导航当前选中项

    1,npm install vuex --save 2,在src下新建vuex文件夹,新建store.js文件: store.js import Vue from 'vue' import Vuex ...

  2. Dynamic CRM 2013学习笔记(二十六)报表设计:Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色

    上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...

  3. vue 入门 ------简单购物车功能实现(全选,数量加减,价格加减)

    简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...

  4. 基于JQ的多选/全选/反选及获取选中的值

    <!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...

  5. vue - 列表显示(列互相影响,全选控制,更新数据)

    要实现的效果为:全选,且列A列B互相影响,列B勾选则列A一定勾选,列A取消勾选,则相应列B取消勾选 数组 vue中列表渲染有些不是相应式的 var list=[ { a:'aaaa', b:'ddd' ...

  6. vue.js实现单选框、复选框和下拉框

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框   在传统的HTM ...

  7. js分类多选全选

    效果如图: HTML代码: <div class="form-group quanxian-wrap"> <label>项目</label> & ...

  8. UITableView多选全选

    自定义cell和取到相应的cell就行了 TableViewCell.h #import <UIKit/UIKit.h> @interface TableViewCell : UITabl ...

  9. Jquery 多选全选/取消 选项卡切换 获取选中的值

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. 【源】ensp 绑定本地网卡与仿真设备进行通信 场景下 仿真设备ping 不通 本机IP 问题

    环境:Win7, ensp 1.2.00.500 问题现象:本机可以ping 通 仿真设备的接口IP,但是在仿真设备上 ping不通 本机接口ip. 问题处理:把本机win7系统只带的防火墙关闭后,在 ...

  2. iOS10以下版本不支持swiper

    解决办法,降低swiper4*版本引用低版本如3.4.2可以兼容iOS8,

  3. Spring 初学笔记

    Spring 初学笔记: https://blog.csdn.net/weixin_35909255/article/category/7470388

  4. gb2312,gbk,utf8的区别

    GB2312编码大约包含6000多汉字(不包括特殊字符),编码范围为第一位b0-f7,第二位编码范围为a1-fe(第一位为cf时,第二位为a1-d3),计算一下汉字个数为6762个汉字.当然还有其他的 ...

  5. 数据结构python编程总结

    大数据.空间限制 布隆过滤器 使用很少的空间就可以将准确率做到很高的程度(网页黑名单系统.垃圾邮件过滤系统.爬虫的网址判重系统等) 有一定的失误率 单个样本的大小不影响布隆过滤器的大小 n个输入.k个 ...

  6. .net framework , code first

    1. 创建一个控制台应用程序, 并添加引用 2 创建 一个类 public class New { [Key] public string NewId { get; set; } public str ...

  7. dwr去除默认错误弹窗

    在开发中,我实在不希望dwr弹出alter,只需要打印错误日志就可以,客户端不需要alert出error或者a server error has occurred. 这样的提示,更不需要alert出堆 ...

  8. MongoDB设置连接池操作百万级以上数据

    开发环境 spring 4.3.7 + springBoot 1.5.2 + dubbo 2.6.5 + mongoDB 4.0.0 连接池配置 mongo-pool.properties sprin ...

  9. mysql关闭groupby模式

    Mysql5.7 出现 SELECT list is not in GROUP BY clause and contains nonaggregated column ‘sss.month_id’ w ...

  10. python requests库爬取网页小实例:ip地址查询

    ip地址查询的全代码: 智力使用ip183网站进行ip地址归属地的查询,我们在查询的过程是通过构造url进行查询的,将要查询的ip地址以参数的形式添加在ip183url后面即可. #ip地址查询的全代 ...