数据格式
后台返回数据格式为
var tree = [
{
children: [
{
children: [],
hasRole: false,
id: 24,
name: "二级菜单A"
},
{
children: [],
hasRole: true,
id: 27,
name: "二级菜单B"
},
{
children: [],
hasRole: true,
id: 25,
name: "二级菜单C"
},
{
children: [],
hasRole: true,
id: 26,
name: "二级菜单D"
}
],
hasRole: true,
id: 7,
name: "一级菜单E"
},
{
children: [
{
children: [],
hasRole: false,
id: 21,
name: "二级菜单F"
},
{
children: [],
hasRole: false,
id: 20,
name: "二级菜单G"
},
{
children: [],
hasRole: false,
id: 23,
name: "二级菜单H"
},
{
children: [],
hasRole: false,
id: 22,
name: "二级菜单I"
}
],
hasRole: false,
id: 6,
name: "一级菜单J"
},
{
children: [
{
children: [],
hasRole: false,
id: 32,
name: "二级菜单K"
},
{
children: [],
hasRole: false,
id: 33,
name: "二级菜单L"
},
{
children: [],
hasRole: false,
id: 28,
name: "二级菜单M"
},
{
children: [],
hasRole: false,
id: 29,
name: "二级菜单N"
},
{
children: [],
hasRole: false,
id: 30,
name: "二级菜单O"
},
{
children: [],
hasRole: false,
id: 31,
name: "二级菜单P"
}
],
hasRole: false,
id: 8,
name: "一级菜单Q"
},
{
children: [
{
children: [],
hasRole: false,
id: 13,
name: "二级菜单R"
}
],
hasRole: false,
id: 3,
name: "一级菜单S"
},
{
children: [
{
children: [],
hasRole: false,
id: 19,
name: "二级菜单T"
},
{
children: [],
hasRole: false,
id: 17,
name: "二级菜单U"
},
{
children: [],
hasRole: false,
id: 16,
name: "二级菜单V"
},
{
children: [],
hasRole: false,
id: 18,
name: "二级菜单W"
}
],
hasRole: false,
id: 5,
name: "一级菜单X"
},
{
children: [],
hasRole: true,
id: 1,
name: "一级菜单Y"
},
{
children: [
{
children: [],
hasRole: false,
id: 14,
name: "二级菜单Z"
},
{
children: [],
hasRole: false,
id: 15,
name: "二级菜单0"
}
],
hasRole: false,
id: 4,
name: "一级菜单1"
},
{
children: [
{
children: [],
hasRole: false,
id: 12,
name: "二级菜单2"
},
{
children: [],
hasRole: false,
id: 11,
name: "二级菜单3"
},
{
children: [],
hasRole: false,
id: 10,
name: "二级菜单4"
},
{
children: [],
hasRole: false,
id: 9,
name: "二级菜单5"
}
],
hasRole: false,
id: 2,
name: "一级菜单6"
}
];
样式
F0CCA897-EF77-4494-A138-FD6180F80EB6.png
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iview example</title>
<link
rel="stylesheet"
type="text/css"
href="http://unpkg.com/iview/dist/styles/iview.css"
/>
<script
type="text/javascript"
src="http://vuejs.org/js/vue.min.js"
></script>
<script
type="text/javascript"
src="http://unpkg.com/iview/dist/iview.min.js"
></script>
<style>
#app {
margin-top: 100px;
}
.boxer {
width: 50%;
margin-left: 20%;
margin-top: 20px;
}
.line-split {
border-bottom: 3px solid #eaa;
padding-bottom: 6px;
margin-bottom: 6px;
}
</style>
</head>
<body>
<div id="app">
<div v-for="(unit,indexu) in tree" class="boxer">
<!-- @click.prevent.native="handleCheckAll" -->
<div class="line-split">
<Checkbox
:indeterminate="treelist[indexu].indeterminate"
:value="treelist[indexu].check"
@click.prevent.native="handleCheckAll(indexu)"
>{{ unit.name }}
</Checkbox>
</div>
<!-- 双向绑定异常 -->
<Checkbox-Group
v-model="treelist[indexu].list"
@on-change="checkAllGroupChange(indexu)"
>
<Checkbox v-for="iunit in unit.children" :label="iunit.id"
>{{ iunit.name }}
</Checkbox>
</Checkbox-Group>
</div>
</div>
<script>
var tree = [
{
children: [
{
children: [],
hasRole: false,
id: 24,
name: "二级菜单A"
},
{
children: [],
hasRole: true,
id: 27,
name: "二级菜单B"
},
{
children: [],
hasRole: true,
id: 25,
name: "二级菜单C"
},
{
children: [],
hasRole: true,
id: 26,
name: "二级菜单D"
}
],
hasRole: true,
id: 7,
name: "一级菜单E"
},
{
children: [
{
children: [],
hasRole: false,
id: 21,
name: "二级菜单F"
},
{
children: [],
hasRole: false,
id: 20,
name: "二级菜单G"
},
{
children: [],
hasRole: false,
id: 23,
name: "二级菜单H"
},
{
children: [],
hasRole: false,
id: 22,
name: "二级菜单I"
}
],
hasRole: false,
id: 6,
name: "一级菜单J"
},
{
children: [
{
children: [],
hasRole: false,
id: 32,
name: "二级菜单K"
},
{
children: [],
hasRole: false,
id: 33,
name: "二级菜单L"
},
{
children: [],
hasRole: false,
id: 28,
name: "二级菜单M"
},
{
children: [],
hasRole: false,
id: 29,
name: "二级菜单N"
},
{
children: [],
hasRole: false,
id: 30,
name: "二级菜单O"
},
{
children: [],
hasRole: false,
id: 31,
name: "二级菜单P"
}
],
hasRole: false,
id: 8,
name: "一级菜单Q"
},
{
children: [
{
children: [],
hasRole: false,
id: 13,
name: "二级菜单R"
}
],
hasRole: false,
id: 3,
name: "一级菜单S"
},
{
children: [
{
children: [],
hasRole: false,
id: 19,
name: "二级菜单T"
},
{
children: [],
hasRole: false,
id: 17,
name: "二级菜单U"
},
{
children: [],
hasRole: false,
id: 16,
name: "二级菜单V"
},
{
children: [],
hasRole: false,
id: 18,
name: "二级菜单W"
}
],
hasRole: false,
id: 5,
name: "一级菜单X"
},
{
children: [],
hasRole: true,
id: 1,
name: "一级菜单Y"
},
{
children: [
{
children: [],
hasRole: false,
id: 14,
name: "二级菜单Z"
},
{
children: [],
hasRole: false,
id: 15,
name: "二级菜单0"
}
],
hasRole: false,
id: 4,
name: "一级菜单1"
},
{
children: [
{
children: [],
hasRole: false,
id: 12,
name: "二级菜单2"
},
{
children: [],
hasRole: false,
id: 11,
name: "二级菜单3"
},
{
children: [],
hasRole: false,
id: 10,
name: "二级菜单4"
},
{
children: [],
hasRole: false,
id: 9,
name: "二级菜单5"
}
],
hasRole: false,
id: 2,
name: "一级菜单6"
}
];
var treelist = [];
var treei = 0;
for (let index = 0; index < tree.length; index++) {
var node = {};
var nodelist = [];
var alllist = [];
var nodei = 0;
var menu = tree[index];
for (let ini = 0; ini < menu.children.length; ini++) {
if (menu.children[ini].hasRole) {
nodelist[nodei++] = menu.children[ini].id;
}
alllist[ini] = menu.children[ini].id;
}
node.size = menu.children.length;
node.id = menu.id;
node.list = nodelist;
node.indeterminate = nodei > 0 && node.size != nodei;
node.alllist = alllist;
node.check = node.size == nodei;
treelist[treei++] = node;
}
new Vue({
el: "#app",
data: {
treelist: treelist
},
methods: {
handleCheckAll: function(index) {
if (treelist[index].indeterminate) {
treelist[index].check = false;
} else {
treelist[index].check = !treelist[index].check;
}
treelist[index].indeterminate = false;
if (treelist[index].check) {
treelist[index].list = treelist[index].alllist;
} else {
treelist[index].list = [];
}
},
checkAllGroupChange: function(index) {
if (
treelist[index].list.length === treelist[index].alllist.length
) {
treelist[index].indeterminate = false;
treelist[index].check = true;
} else if (treelist[index].list.length > 0) {
treelist[index].indeterminate = true;
treelist[index].check = false;
} else {
treelist[index].indeterminate = false;
treelist[index].check = false;
}
}
}
});
</script>
</body>
</html>
- iview 定义的函数可以传入自定义参数调用
- 数组中存放数字正常使用, 当使用 toString() 函数时,不能正常绑定数据.说明参数的类型是必须相同的(如果在js 中获取id 时使用了 toString() ,那么在 :label = id 时 也要 用 toString())
