vue使用elementUI动态渲染checkbox三级菜单
2019-04-15 20:07
746 查看
4000
<template> <div class="content"> <el-row> <el-col :span="4" align="right"> <div style="line-height: 40px;">权限</div> </el-col> </el-row> <el-row class="mb15"> <el-col :span="18" :offset="3" align="left"> <div class="boders"> <el-checkbox v-model="checkAll" @change="handleCheckAllChange" >全部</el-checkbox> </div> </el-col> </el-row> <el-checkbox-group @change="handleCheckedMenuChange" v-model="checkedMenu" v-for="(item,index) in checkBoxData" :key="item.id"> <el-row class="mb15" :indeterminate="isIndeterminate1"> <el-col :span="18" :offset="3" align="left"> <div class="boders"> <el-row class="mb15"> <el-col :span="5"> <el-checkbox :label="item.id" @change="handleCheckedChildMenuChange($event,index)">{{item.title}}</el-checkbox> </el-col> <el-checkbox-group v-model="item.checkedChildMenu" @change="handleMenuChildChange($event,item.id,index)"> <el-col :span="10" class="shulie"> <el-row v-for="(child,index2) in item.child" :key="child.id" class="mb15"> <el-checkbox :label="child.id">{{child.title}}</el-checkbox> </el-row> </el-col> </el-checkbox-group> </el-row> </div> </el-col> </el-row> </el-checkbox-group> </div> </template>
<script type="text/javascript"> import { getAddCheckBox } from "@/api/apiw.js"; export default { name: "list", data() { return { //角色 checkBoxData: [ ], checkAll: false, checkedMenu: [], isIndeterminate: true, isIndeterminate1: true, }, // 角色 roleaddRules: { name: [ { required: true, message: "请完善标签内容", trigger: "blur" } ] }, roleupdate: {}, roleupdateRules: { name: [ { required: true, message: "请完善标签内容", trigger: "blur" } ] }, }; }, mounted: function() { this.$nextTick(function() { this.lowd(); }); getAddCheck(); }, methods: { //监听【全部】选项改变,一级菜单 handleCheckAllChange(val){ //如果【全选】被打钩即vaule=true,那么把接收到的菜单数据里所有的菜单id传到跟一级菜单v-model的checkedMenu里,实现二级菜单全选 //如果【全选】没被打钩即vaule=flase,那么返回一个空到checkedMenu里,实现二级菜单全不选 this.checkedMenu =val ? this.checkBoxData.map((item)=>{ item.checkedChildMenu=item.child.map((it)=>{ return it.id }) return item.id }):this.checkBoxData.map((item)=>{ item.checkedChildMenu=item.child.map((it)=>{ return ; }) return ; }); this.isIndeterminate = false; }, //监听二级菜单改变一级菜单 handleCheckedMenuChange(value) { let checkedCount = value.length; this.checkAll = checkedCount === this.checkBoxData.length; this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkBoxData.length; }, //监测二级菜单对应的选项改变 handleCheckedChildMenuChange(value,index){ //二级菜单的哪个选项被打钩,即value=true;那把对应的菜单id传到checkboxdata下标对应的checkedChildMenu里面; //反之没被选中,就传个空进去,实现对应二级菜单没被选 this.checkBoxData[index].checkedChildMenu = value ? this.checkBoxData[index].child.map((item)=>{ return item.id }): []; }, //监测三级菜单改变 handleMenuChildChange(value,id,index){ //如果三级菜单一个都没有被选中,那么把他对应的二级菜单id从checkMenu里面删除,实现对应的二级菜单自动取消勾选 if (value.length<=0) { let idIndex= this.checkedMenu.indexOf(id); this.checkedMenu.splice(idIndex,1) } //如果三级菜单已被选中的id数组==checkboxdata对应index下的di数组,那么把对应的二级菜单的id传到checkedMenu里面去,实现对应的二级菜单自动勾选, if(value.sort().toString() == this.checkBoxData[index].child.map((item)=>{ return item.id }).sort().toString()){ this.checkedMenu.push(id) } }, getAddCheck() { getAddCheckBox().then(res=>{ this.checkBoxData=res.map((it)=>{ return Object.assign(it,{ checkedChildMenu:[] }) }); }) } } }; </script>
相关文章推荐
- vue项目中用elementUI写动态的顶部导航菜单(三级菜单)
- elementUI 动态渲染三级菜单
- vue2.0+elementui 兼容ie以及使用部分内容没有渲染成功
- vue使用ElementUI如何修改checkbox复选框颜色
- 三级动态树形菜单
- cxGrid多选使用CheckBox cxGrid动态创建带CheckBox列时遇到的问题...
- 使用函数递归实现基于php和MySQL的动态树型菜单
- 左侧动态管理菜单的实现(Repeater中嵌套使用Repeater)
- jQuery使用动态渲染表单功能完成ajax文件下载
- JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果
- 三级动态树形菜单
- 动态实现树形菜单(使用dtree控件)
- C# WinForm中MenuStrip动态菜单使用总结
- 【Cocos2d-X开发学习笔记】第09期:渲染框架之菜单类(CCMenu)的使用
- 使用dxNavBar动态创建应用程序菜单
- 管理系统三级菜单动态实现
- 在Winform中菜单动态添加“最近使用文件”
- js封装的三级联动菜单(使用时只需要一行js代码)
- 动态建立右键菜单(一级/二级/三级) 响应鼠标单击事件及修改项的内容
- 使用递归从数据库读取数据来动态建立菜单