HTML section:
<ul class= "role-table col-xs-offset-2 col-md-offset-1 col-sm-offset-2" > <li class= "header" > <di V class= "Left" > Menu list </div> <div class= "right" > Function rights </div> </li> <div class= "ve Rtical-line "></div> <li v-for=" (item,index) in dataList ": key=" Item.id "> <div class=" Left H "@click =" fold (item) "> <i:class=" {' El-icon-caret-right ': item.folded, ' el-icon-caret-bottom ':!item.fol ded} "V-cloak v-if=" Item.second "class=" Item-icon "></i> <el-checkbox @click. native= "Handleonecheckall ($event, item)" V-cloak v-if= "!item.second": indeterminate= "Item.isindeterminate" V-model= "Item.checkall" > {{item.title}}</el-checkbox> <span v-if= "Item.second" v-cloak>{{it em.title}}</span> </div> <div class= "right h40" > <el-checkbox v-if= "item. Second ": indeterminate=" Item.isiNdeterminate "@change =" Checksecondall (item) "V-model=" Item.firstcheckall "> All </el-checkbox> <el-c Heckbox-group v-model= "item.checkedcities" @change = "Handleonecheckedcitieschange (item)" V-else> <el -checkbox v-for= "M in Item.list": label= "m.id": key= "m.id" v-cloak> {{m.name}}</el-checkbox> </el -checkbox-group> </div> <div class= "line" ></div> <ul v-show= "ITEM.SECOND&A
mp;&!item.folded "> <li class=" h40 "v-for=" (second,cur) in Item.second ": key=" Second.id "> <div class= "Left" > <el-checkbox v-model= "second.checkall" @change = "Handlecheckallch
Ange ($event, Item,second) "v-cloak> {{second.title}} </el-checkbox> </div> <div class= "right" > <el-checkbox-group v-model= "se Cond.checkedcities "@chaNge= "Handlecheckedcitieschange (item,second)" > <el-checkbox v-for= "P in second.list": label= "
P.id ": key=" P.id "V-cloak > {{p.name}} </el-checkbox>
</el-checkbox-group> </div> <div class= "line" ></div> </li> </ul> </li> </ul>
CSS Section
. role-table {
border:1px solid #e0e0e0;
Border-bottom:none;
padding:0;
position:relative;
}
. header {
height:40px;
line-height:40px;
border-bottom:1px solid #e7e7e7;
Background: #F8F8F9;
Text-align:center;
}
. vertical-line {
width:1px;
height:100%;
Background: #ddd;
Position:absolute;
left:30%;
top:0
}
. Left {
width:30%;
Float:left;
padding-left:10px;
User-select:none;
Cursor:pointer;
}
. one {
padding-left:20px;
}
. Right {
width:70%;
Float:left;
padding-left:10px;
}
. Item-icon {
margin-left: -5px;
padding:5px;
}
. line {
clear:both;
width:100%;
height:1px;
Background: #e0e0e0;
}
. h40{
height:39px;
line-height:39px;
}
[V-cloak] {
display:none;
}
JS section
NewVue ({el: "#app", data: {dataList: [{title: "Overview", ID: "0",
Checkedcities:[], list: [{name: "Browse",
ID: "10001"}, {name: "Modify", ID: "11111"}]}, {title: "Member Management
", ID:" 1 ", second: [{title:" Membership List ", ID: "One", list: [{n
Ame: "New", ID: "10002"}, {
Name: "Modified", ID: "10003"}
], Checkedcities: []}, {title: "Membership Level",
ID: "A", list: [{
Name: "New", ID: "10004"}, {
Name: "Modified", ID: "10005"},
{Name: "delete", ID: "1006"
}], checkedcities: []}
]}, {title: "Menu Management", ID: "2", Second: [ {title: "Menu List", id: "+", List:
[ {Name: "new", ID: "10007"
}, {name: "Modified", ID: "10008"
}], checkedcities: []}, {title: "Membership level", ID: "$", Li ST: [{Name: "Browse", ID: "10009
"}, {name:" New ",
ID: "10010"}, {
Name: "Modified", ID: "10011"}, { Name: "Delete", ID: "10012"}],
Checkedcities: []}]}],}, methods: { Foldfunction(item) {if(typeofitem.folded = = = "undefined") { This. $set (item, "Folded",true); }Else{item.folded =!item.folded; }},//Select all Handlecheckallchange (event, item, second) { Letarr = []; for( LetA = 0; A < Second.list.length; a++) {Arr.push (second.list[a].id)}if(typeofSecond.checkedcities = = = "undefined") { This. $set (Second, "Checkedcities", arr); } second.checkedcities = event.target.checked?
ARR: [];
if (typeof second = = = "undefined") {//this. $set (second, "Isindeterminate", False)//} Second.isindeterminate = false;if(typeofSecond.checkall = = = "undefined") { This. $set (Second, "Checkall",true); }if(typeofItem.isindeterminate = = = "undefined") { This. $set (item