您的位置:首页 > Web前端 > Vue.js

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: