webVueBlog
commented
4 years ago <template>
<view>
<account-page ref="accountPage" :accountData="accountData"></account-page>
</view>
</template>
<script>
import accountPage from '../../components/account-page/account-page.vue'
export default {
components: {
accountPage,
},
data() {
return {
accountData: [
{
id: 1,
account: 'admin',
show: false,
children:[
{
id: 2,
account: 'admin2',
show:false,
children:[
{
id: 2,
account: '1',
},
{
id: 3,
account: '2',
},
{
id: 4,
account: '3',
}
]
},
{
id: 3,
account: 'admin3',
},
{
id: 4,
account: 'admin4',
}
]
},
]
}
},
onLoad() {
},
methods: {
}
}
</script>
<style scoped>
</style>
<template>
<view>
<view v-for="(item,index) in accountData" :key="index" >
<view @click="showItem(item)" >{{item.account}}</view>
<account-page style="margin-left: 20px;" v-if="item.children && item.show" ref="accountPage" :accountData="item.children"></account-page>
</view>
</view>
</template>
<script>
import accountPage from '../../components/account-page/account-page.vue'
export default {
name: 'accountPage',
components: {
accountPage,
},
props: {
accountData:{
style: Array,
default: []
}
},
data(){
return {
}
},
methods: {
showItem(item){
if(item.show){
item.show = false
}else{
item.show = true
}
}
}
}
</script>
<style>
</style>
[vue]