类似网盘形式的上一级下一级文件
<!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>目录结构点击下一级,返回上一级</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
.last {
color: aqua;
cursor: pointer;
}
.itemcss{
margin: 10px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<div class="hello">
<div>
<div @click="clickOut()" class="last"><i v-if="historyList.length>0" class="el-icon-back"></i>{{historyList.length>0?"返回上一级":"目录"}}</div>
<div v-for="i in showData" :key="i.id">
<div class="itemcss" @click="clickIn(i)">
{{i.label}}
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
listData:[],
showData:[],
historyList:[]
},
computed: {},
methods: {
clickIn(i){
console.log(i);
if(i.children&&i.children.length>0){
this.historyList.push(this.showData);
this.showData = i.children;
console.log(this.historyList);
}
},
clickOut(){
if(this.historyList&&this.historyList.length>0){
this.showData =this.historyList[this.historyList.length-1]
this.historyList.pop()
console.log(this.historyList);
}
}
},
beforeMount() {},
mounted() {
this.listData = [
{
"id": 1,
"label": "文件夹1-------点击进入下一级",
"children": [
{
"id": 101,
"label": "文件夹----点击进入下一级",
"children":[
{
"id": 1001,
"label": "文件-----1001",
}
]
},
{
"id": 102,
"label": "文件102"
},
{
"id": 103,
"label": "文件103"
}
]
},
{
"id": 2,
"label": "文件2"
},
{
"id": 3,
"label": "文件3"
},
{
"id": 4,
"label": "文件4"
},
{
"id": 5,
"label": "文件5"
}
]
this.showData = this.listData
}
})
</script>
</body>
</html>