vue结合element UI做checkbox全选的tree结构
时间:2020-08-08
本文章向大家介绍vue结合element UI做checkbox全选的tree结构,主要包括vue结合element UI做checkbox全选的tree结构使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
由于element UI中的tree可能不能满足项目中的样式需求,所以自己动手结合element中的checkbox全选功能实现了一个符合项目需求的tree。效果如下:
html部分:
<template> <div class="tree-container"> <div v-for="(item,index) in menus" :key="index"> <p class="toggleIcon" @click="toggleShow(item)">{{item.isShowAll?'-':'+'}}</p> <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="((val)=>{handleCheckAllChange(item,val)})"> {{item.name}} </el-checkbox> <span class="checkBox-num">{{item.num}}</span> <el-checkbox-group v-model="item.checkedCities" @change="((val)=>{handleCheckedCitiesChange(item,val)})" class="checkGroup" v-if="item.isShowAll"> <el-checkbox v-for="(it,i) in item.userList" :key="i" :label="it.num" @change="((val)=>{handleCheckedOne(it,val)})"> <label class="icon-zhu" v-if="it.telType == '移动电话' && numList.indexOf(it.num)>=0 "> <span :class="numList[0] === it.num?'colorful-icon':''">主</span> </label> <label class="tree-text"> {{it.telType}} <span v-if="it.cardType">({{it.cardType}})</span> </label> <label class="tree-text">{{it.num}}</label> <label class="tree-text">{{it.label}}</label> </el-checkbox> </el-checkbox-group> </div> </div> </template>
js部分:
export default { name: "Tree", props: ["menus", "formData", "numList"], methods: { // 是否展开checkbox toggleShow(item) { item.isShowAll = !item.isShowAll; }, handleCheckAllChange(item, val) { if (val) { item.userList.map(it = > { let numIndex = this.numList.indexOf(it.num); item.checkedCities.push(it.num); this.formData.userNum = Array.from(new Set(this.formData.userNum.concat(item.checkedCities))); if (it.telType == "移动电话") { this.numList.push(it.num); } }); } else { item.userList.map(it = > { let Index = this.formData.userNum.indexOf(it.num); let numIndex = this.numList.indexOf(it.num); if (Index > -1) { this.formData.userNum.splice(Index, 1); } if (numIndex > -1) { this.numList.splice(numIndex, 1); } }); item.checkedCities = []; } item.isIndeterminate = false; }, handleCheckedCitiesChange(item, val) { let checkedCount = val.length; item.checkAll = checkedCount === item.userList.length; item.isIndeterminate = checkedCount > 0 && checkedCount < item.userList.length; }, handleCheckedOne(item, val) { let Index = this.formData.userNum.indexOf(item.num); let numIndex = this.numList.indexOf(item.num); //如果找到了,有此值 if (Index > -1) { this.formData.userNum.splice(Index, 1); } else { this.formData.userNum.push(item.num); } if (item.telType == "移动电话") { if (numIndex > -1) { this.numList.splice(numIndex, 1); } else { this.numList.push(item.num); } } } } };
css样式
<style lang="scss" scoped> @import "../../../assets/css/base.scss"; .tree-container { width: 100%; position: relative; padding: 10px; &>div { margin-left: 20px; } .toggleIcon { width: 14px; height: 14px; border: 1px solid #dcdcdc; @include wordStyle(#dcdcdc, 14px, 600); text-align: center; line-height: 11px; cursor: pointer; position: absolute; left: 10px; margin-top: 10px; } .checkGroup { display: flex; flex-direction: column; padding-left: 20px; } /deep/ .el-checkbox { &+.el-checkbox { margin-left: 0; } } /deep/ .el-checkbox__inner { &: hover { border-color: #ed795a; } &:focus { border: 1px solid #dcdfe6; outline: none; } } /deep/ .el-checkbox__input { &.is-checked,&.is-indeterminate { .el-checkbox__inner { background-color: #ed795a; border-color: #ed795a; } } &.is-checked { &+.el-checkbox__label { color: #ed795a; } } } /deep/ .el-checkbox__label { font-size: 12px; padding-left: 0; } /deep/ .el-checkbox { position: relative; } .icon-zhu { position: absolute; left: -24px; span { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 100%; color: #fff; font-weight: bold; background-color: #ccc; } .colorful-icon { background-color: #ed795a; } .checkBox-num { position: absolute; right: 10px; font-size: 12px; } } </style>
数据结构如下
menus: [{ id: "1", name: "不限量173套餐", num: "23789446464646", checkAll: false, checkedCities: [], //v-model绑定 isIndeterminate: false, //设置 indeterminate 状态,只负责样式控制 isShowAll: true, //控制展开和收缩的状态 userList: [{ id: "1.1", username: "html", role: "主管", telType: "移动电话", cardType: "主号", label: "现行", num: "17316065935" }, { id: "1.2", username: "vue", role: "普通", telType: "有线宽带", cardType: "", label: "现行", num: "hz87654321" }, { id: "1.3", username: "vue", role: "普通", telType: "移动电话", cardType: "副号", label: "现行", num: "17316065937" }] }, { id: "1", name: "不限量199套餐", num: "23789446464646", checkAll: false, checkedCities: [], //v-model绑定 isIndeterminate: false, //设置 indeterminate 状态,只负责样式控制 isShowAll: true, userList: [{ id: "1.1", username: "html", role: "主管", telType: "有线宽带", cardType: "", label: "现行", num: "hz1234567" }, { id: "1.2", username: "vue", role: "普通", telType: "移动电话", cardType: "副号", label: "现行", num: "19916065934" }, { id: "1.3", username: "vue", role: "普通", telType: "移动电话", cardType: "副号", label: "现行", num: "19916065936" }] }]
原文地址:https://www.cnblogs.com/florazeng/p/13460546.html
- gh-ost:在线DDL修改MySQL表结构工具
- poj-----(2828)Buy Tickets(线段树单点更新)
- javaSE之线程联合
- ASM 翻译系列第三十一弹:了解ASM文件的空间分配
- 备份重于一切:远离“Gitlab删库事件”,QBackup是你的最佳选择!
- FFMPEG指令
- Gitlab删库事件回顾,备份手段还停留在“原始社会”?
- ASM 翻译系列第三十二弹:自制数据抽取小工具
- WordPress集成SendCloud邮件代发,规避SMTP泄漏网站主机真实IP的风险
- ASM 翻译系列第三十三弹:REQUIRED_MIRROR_FREE_MB的含义
- 放弃Python转向Go语言:这9大理由就够了 !(附代码)
- CCKiller:Linux轻量级CC攻击防御工具,秒级检查、自动拉黑和释放
- 利用HSTS安全协议柔性解决全站HTTPS的兼容性问题
- Nginx内容替换模块http_substitutions_filter_module及实用案例分享
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Mac上安装tesseract-OCR
- 6.02-news_re
- 6.03-news_xpath2
- 修改mysql密码
- 6.04-news_xpath3
- 6.05-btc
- 7.01-beautiful_soup
- mysql导入导出数据
- 7.01-beautiful_soup2
- 7.01-beautiful_soup3
- CentOS7上安装 JDK8 Hadoop Hive
- 7.02-bs4_btc
- [已解决]报错:UnicodeEncodeError: 'latin-1' codec can't encode characters in position 80-81
- 8.02-json_use
- Scrapy问题