vue+element 动态加载数据，checkbox实现全选，不全选

效果图：

功能描述：图中所展示数据，全是从服务器获取的数据动态加载，实现点击全选，不全选，加粗字体为父节点，后面为子节点。

数据结构：

[{"children": [{"children": [{"incode": "202","isdist": 0,"remark": "yzzd","value": "一轴制动"},{"incode": "203","isdist": 0,"remark": "ezzd","value": "二轴制动"},{"incode": "204","isdist": 0,"remark": "szzd","value": "三轴制动"},{"incode": "205","isdist": 0,"remark": "sizzd","value": "四轴制动"},{"incode": "206","isdist": 0,"remark": "wzzd","value": "五轴制动"},{"incode": "207","isdist": 0,"remark": "lzzd","value": "六轴制动"}],"isdist": 0,"value": "各轴制动"},{"children": [{"incode": "225","isdist": 0,"remark": "yzjzzd","value": "一轴加载制动"},{"incode": "226","isdist": 0,"remark": "ezjzzd","value": "二轴加载制动"},{"incode": "227","isdist": 0,"remark": "szjzzd","value": "三轴加载制动"},{"incode": "228","isdist": 0,"remark": "sizjzzd","value": "四轴加载制动"},{"incode": "229","isdist": 0,"remark": "wzjzzd","value": "五轴加载制动"},{"incode": "230","isdist": 0,"remark": "lzjzzd","value": "六轴加载制动"}],"isdist": 0,"value": "加载制动"},{"children": [{"incode": "209","isdist": 0,"remark": "zyd","value": "左远灯"},{"incode": "210","isdist": 0,"remark": "zfd","value": "左副灯"},{"incode": "211","isdist": 0,"remark": "zjd","value": "左近灯"},{"incode": "212","isdist": 0,"remark": "yyd","value": "右远灯"},{"incode": "213","isdist": 0,"remark": "yfd","value": "右副灯"},{"incode": "214","isdist": 0,"remark": "yjd","value": "右近灯"}],"isdist": 0,"value": "灯光"},{"children": [{"incode": "216","isdist": 0,"remark": "wg","value": "外观"},{"incode": "217","isdist": 0,"remark": "dt","value": "动态"},{"incode": "218","isdist": 0,"remark": "jt","value": "静态"},{"incode": "222","isdist": 0,"remark": "lszd","value": "路试制动"},{"incode": "223","isdist": 0,"remark": "lszc","value": "路试驻车"},{"incode": "224","isdist": 0,"remark": "lscsb","value": "路试车速表"}],"isdist": 0,"value": "PDA功能"},{"children": [{"incode": "201","isdist": 0,"remark": "lz","value": "轮重"},{"incode": "208","isdist": 0,"remark": "zczd","value": "驻车制动"},{"incode": "215","isdist": 0,"remark": "qlch","value": "前轮侧滑"},{"incode": "219","isdist": 0,"remark": "csb","value": "车速表"},{"incode": "220","isdist": 1,"remark": "zbzl","value": "整备质量"},{"incode": "221","isdist": 0,"remark": "wkcc","value": "外廓尺寸"}],"isdist": 0,"value": "整车"}],"value": "安检检测项目"},{"children": [{"children": [{"incode": "307","isdist": 0,"remark": "wg","value": "外观检测"},{"incode": "308","isdist": 0,"remark": "obd","value": "OBD检测"},{"incode": "309","isdist": 0,"remark": "hbgc","value": "环保过车"}],"isdist": 0,"value": "通用"},{"children": [{"incode": "304","isdist": 0,"remark": "sds","value": "双怠速"},{"incode": "305","isdist": 0,"remark": "wtgk","value": "稳态工况"},{"incode": "306","isdist": 0,"remark": "stgk","value": "简易瞬态工况"}],"isdist": 0,"value": "汽油车"},{"children": [{"incode": "301","isdist": 0,"remark": "yd","value": "滤纸式烟度"},{"incode": "303","isdist": 0,"remark": "jzjs","value": "加载减速"},{"incode": "302","isdist": 0,"remark": "btgyd","value": "不透光烟度"}],"isdist": 0,"value": "柴油车"}],"value": "环检检测项目"}
]

页面代码：采用三层循环，依次加载显示视图。

<el-card class="box-card" v-for="card in options"><div slot="header" class="clearfix"><span>{{ card.value }}</span></div><div class="text item" v-for="(item,index) in card.children"><el-row :gutter="24" style="margin-bottom: 5px;margin-top: 5px"><el-col :span="4"><el-checkboxstyle="margin: 0;":false-label="0":true-label="1"v-model="item.isdist"@change="checked=>handleCheckAllChange(checked,item.children)"class="labs"><b>{{ item.value}}</b></el-checkbox></el-col><el-col :span="20"><el-checkboxstyle="margin: 0;":false-label="0":true-label="1":key="items.incode"v-model="items.isdist"v-for="items in item.children"@change.native="leftSelected()"class="labs">{{ items.value}}</el-checkbox></el-col></el-row></div>
</el-card>

实现效果代码：

 //实现组内全选和不全选handleCheckAllChange(val,row) {if(val=='1'){row.forEach(item => {this.$set(item, 'isdist', 1);})}else{row.forEach(item => {this.$set(item, 'isdist', 0);})}},

如果保存时，数据结构为 202,203,204,205,206,207,220；那么可以在保存事件触发时，获取到所有勾选的选项,代码如下：

 this.abilityincode = '';this.options.forEach(element =>{element.children.forEach(item =>{item.children.forEach(itemt=> {if(itemt.isdist === 1){this.abilityincode += itemt.incode+',';}});})});this.abilityincode =this.abilityincode.substring(0,this.abilityincode.length-1);

到此，小功能完成。注意 :false-label="0" :true-label="1" 上图代码中"0"或者"1"，可以为1或者0，或者true或false，取决于服务器返回的数据。

记录：计算属性

v-model="red[index]"

computed: {                                  //分组名数据值的设置red() {                                    //v-model="red[index]" red：计算函数  index传某组的第几个let statusArr = new Array();this.options.forEach(item=>{item.children.forEach(items=> {let status = 1;items.children.forEach(itemt=> {if(itemt.isdist === 0) {status = 0;}});statusArr.push(status);});});console.log(JSON.stringify(statusArr))  //[1,0,0,0,0,0,0,0,0,0,0,0,0,0]return statusArr;}
}

vue+element 动态加载数据，checkbox实现全选，不全选相关推荐

Vue下拉框动态加载数据
Vue下拉框动态加载数据 <template><a-select v-model="model.type" show-search placeholder=&qu ...
ASP.NET MVC动态加载数据
ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分: <table><tr><th styl ...
在Vue中异步加载数据渲染到Dom
在Vue中异步加载数据渲染到Dom 问题 <div v-for="o in resmessage" :key="o" class="text i ...
jsgrid使用control的loadData动态加载数据
近日因为要做一个管理后台,使用了AdminLte,做了权限控制后就要做数据显示了,我选择了jsgrid.jsgrid可以静态加载数据,也可以动态加载数据,静态加载数据在官方文档有直接可运行的例子,这里 ...
iscroll动态加载数据完美解决方案
iscroll动态加载数据完美解决方案参考文章: (1)iscroll动态加载数据完美解决方案 (2)https://www.cnblogs.com/ShoneH/p/5253758.html (3 ...
如何在 InfoPath 2003 表单中动态加载数据
转自微软:http://support.microsoft.com/kb/896451/zh-cn 概要简介更多信息创建新的虚拟目录设计 Microsoft Office InfoPath 2 ...
python爬取js加载的数据_JS动态加载数据不会爬？老司机教你两个方法爬取想要的数据...
学习Python的人绝大部分都是在用Python做爬虫,毕竟对于爬虫而言Python是不二选. 但是一般简单的静态页面网站还是很好爬取的,对于很多动态加载的网站就不知道怎么办了,今天小编就给大家介绍两 ...
echarts java动态数据_[ASP.net教程]ECharts Java 动态加载数据，echartsjava
[ASP.net教程]ECharts Java 动态加载数据,echartsjava 0 2015-12-18 00:00:05 1.前台jsp页面html PUBLIC "-//W3C// ...
selectpicker 动态加载数据
在做二级下拉菜单动的时候,一般需要动态的给第二个下拉菜单赋值(有时候第一个下拉菜单也是动态加载数据),一般的下拉框的样式比较丑,当使用selectpicker进行下拉菜单美化时,有可能导致下拉菜单加载 ...

vue+element 动态加载数据，checkbox实现全选，不全选

vue+element 动态加载数据，checkbox实现全选，不全选相关推荐

最新文章

热门文章