數(shù)據(jù)格式
后臺返回數(shù)據(jù)格式為
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"
/>
<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 定義的函數(shù)可以傳入自定義參數(shù)調用
- 數(shù)組中存放數(shù)字正常使用, 當使用 toString() 函數(shù)時,不能正常綁定數(shù)據(jù).說明參數(shù)的類型是必須相同的(如果在js 中獲取id 時使用了 toString() ,那么在 :label = id 時 也要 用 toString())
