VUE recursive algorithm tree menu wording:
<Template>
<div>
<-! parent component subassembly incoming data ->
<Tree: MSG = 'MSG' />
</ div>
</ Template>
<Script>
Export default {
Data () { / / analog data
return {
n-: 0 ,
MSG: [{name: 'Beijing' ,
Sub: [{name: 'Dongcheng' ,
Sub: [
{name: 'Chaoyang' }
]
}, {name: 'West District ' ,
sub:[
{name: 'Off tiger village'}
]
}, {name: 'South City'}, {name: 'North District' }]
}
, {
name: 'Guangdong' ,
Sub: [{name: 'Guangzhou' ,
Sub: [{name: 'Yuexiu'}, {name: 'Baiyun'}, {name: 'Haizhu' }]
},
{name: "Shenzhen" ,
Sub: [{name: 'Shekou'}, {name: 'security area '}, {name:' Yantian ' }]
},
]
},{
name:'Hubei' ,
Sub: [{name: 'Wuhan' ,
Sub: [{name: 'Jiangxia'}, {name: "Hongshan"}, {name: 'Jianghan' }]
},
{name: 'Tianmen' ,
Sub: [{name: 'wizard'}, {name: "small classes"}, {name: 'dressed up' }]
}]
}]
}
}
// Register parent components
components: {
Tree: {
name: 'GS',// constructor name recursion
// parent component templates, the equivalent constructor return value
template: `
<UL>
<li v-for = "(V, I) in MSG": Key click.stop.self = @ = I '= n-I'> // data of the first layer, click, the subset of the menu expands, other subsets menu Close
{} {} V.NAME
<GS: MSG = v.sub V- IF = "I n-==" /> // next layer data into the constructor call, recursive form, corresponding to their call themselves, this step is the most critical step,
</ Li>
</ UL> `,
the props: [ 'MSG'], // receiving parent component values pass Data () {
return {
n-: 0 // default expanded menu subscript }
}
},
}
} </ Script>
JS recursive implementation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="fun()">递归测试</button>
<div id="div">
</div>
<script>
//模拟数据
var data = [{
name: 1,
sub: [{
name: '1-1',
sub: []
}]
}, {
name: 2,
sub: [{
name: "2-1",
sub: [{
name: '2-1-1',
sub: []
}, {
name: '2-1-2',
sub: []
}
]
}, {
name: "2-2",
sub: [{
name: '2-2-1',
sub: []
}, {
name: '2-2-2',
sub: [{
name: '2-2-2-1',
sub: []
}]
}]
}
]
}, {
name: 3,
sub: []
}]
var div = document.getElementById('div')
var str = '';
//递归函数function list(data) {
if (data) {
if (data.length > 0) {
str += "<ul>";
for (let v = 0; v < data.length; v++) {
const item = data[v];
str += '<li>' + item.name;
list(item.sub)
str += '</li>';
}
str += "</ul>";
}
}
}
list(data)
console.log(str)
div.innerHTML = str;
// The following is a recursive function test, regardless of the menu tree
var ARR = [];
function Fun () {
var NUM = parseFloat (prompt ( "Enter number:" ));
IF ( typeof (NUM) == 'Number' ) {
the while (NUM> 0 ) {
arr.push (NUM)
NUM - ;
}
// the console.log (ARR)
}
}
var arrlist = [];
// var Data = [. 1, [2,3], [. 4, [5,6, [. 8]]],. 9, [10]];
var fun3 = arr => [...arr].map((item) => Array.isArray(item) ? fun3(item) : arrlist.push(item));
fun3(data)
// console.log( fun3(data))
</script>
</body>
</html>
Use VUE + element-ui realized tree menu:
<template>
<div class="custom-tree-container">
<div class="block">
<p>使用 render-content</p>
<el-tree
:data="data"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent"
></el-tree>
</div>
<div class="block">
<p>使用 scoped slot</p>
<el-tree
:data="data"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button type="text" size="mini" @click="() => append(data)">Append</el-button>
<el-button type="text" size="mini" @click="() => remove(node, data)">Delete</el-button>
</span>
</span>
</el-tree>
</div>
<button @click="getAdd">+</button>
<button @click="getjian">-</button>
</div>
</template>
<script>
the let ID = 1000 ;
Export default {
Data () {
const Data = [
{
name: "Beijing" ,
Sub: [
{
name: "Beijing" ,
Sub: [
{name: "Dongcheng" },
{name: "West city " },
{name: " South city " },
{name: " Northern Town " }
]
}
]
},
{
name:"Guangdong" ,
Sub: [
{
name: "Canton" ,
Sub: [{name: "Yuexiu"}, {name: "Baiyun"}, {name: "Haizhu" }]
},
{
name: " Shenzhen " ,
Sub: [{name: " Shekou "}, {name:" security zone "}, {name:" Yantian " }]
}
]
},
{
name: " Hubei " ,
Sub: [
{
name: "Wuhan" ,
Sub: [{name:"Jiangxia"}, {name: "Hongshan"}, {name: "Jianghan" }]
},
{
Name: "Tianmen" ,
Sub: [{name: "Wizard"}, {name: "small classes"}, {name: "dressed" }]
}
]
}
];
// key part of
the let the _data = function (data) {
return Data.Map (V => {
IF (v.sub) { // iterate data, menu data assigned to the specified attribute name ui frame
v.label = V.NAME;
v.children = v.sub ;
return the _data (v.sub);
}
IF (! && V.NAME v.sub) {
v.label = v.name;
return 123;
}
});
};
_data(data);
return {
data: JSON.parse(JSON.stringify(data)), //将处理过的数据进行深刻隆
data: JSON.parse(JSON.stringify(data))
};
},
methods: {
append(data) {
const newChild = { id: id++, label: "testtest", children: [] };
if (!data.children) {
this.$set(data, "children", []);
}
data.children.push(newChild);
},
remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
renderContent(h, { node, data, store }) {
return (
<span class="custom-tree-node">
<span>{node.label}</span>
<span>
<el-button
size="mini"
type="text"
on-click={() => this.append(data)}
>
Append
</el-button>
<el-button
size="mini"
type="text"
on-click={() => this.remove(node, data)}
>
Delete
</el-button>
</span>
</span>
);
},
getAdd() {
this.$store.commit("increment");
console.log("我是加法" + this.$store.state.count);
},
getjian() {
this.$store.commit("jian", 2);
console.log("我是加Z法" + this.$store.state.count);
}
},
mounted() {
console.log(this.$store.state.count);
}
};
</script>
<style>
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
</style>