1、用到的框架：vue\element ui 2、主要代码：element的树形控件+vue插槽 3、代码展示： HTML
<el-tree :expand-on-click-node="false" :data="first" :props="defaultProps" accordion>
<template #default="{ node, data }">
<span class="custom-tree-node">
<div class="zxc">
<span class="news">【{{ data.type }}】<span v-show="!data.condition">账号：{{data.num + '，姓名：' + data.name }}</span></span>
<a @click="main(data)" class="a-main" v-show="!data.condition">详情</a>
<a @click="main(data)" class="a-main" v-show="data.condition">收起</a>
</div>
<div class="hidetext" v-show="data.condition">
<div>姓名： {{ data.name }}</div>
<div>账号： {{ data.num }}</div>
<div>交易余额：{{ data.balance }}</div>
<div>累计入金：{{ data.refill }}</div>
<div>邮箱：{{ data.email }}</div>
<div>手机号：{{ data.phone }}</div>
<div>注册时间：{{ data.time }}</div>
</div>
</span>
</template>
</el-tree>
JS：
<script>
new Vue({
el: '#app',
data() {
return {
first: [{
condition: false,
type: '代理',
num: '888888',
name: '张三sad',
balance: '0.00',
refill: '100011.111',
email: '555555555@169.com',
phone: '11111111111',
time: '2021-07-27 17:45',
children: [
{
condition: false,
type: '代理',
num: '888880',
name: '测试',
balance: '0.00',
refill: '100011.111',
email: '555555555@169.com',
phone: '11111111111',
time: '2021-07-27 17:45',
children: [
{
condition: false,
type: '代理',
num: '888880',
name: '测试asdsadsadsad',
balance: '0.00',
refill: '100011.111',
email: '555555555@169.com',
phone: '11111111111',
time: '2021-07-27 17:45'
}, {
condition: false,
type: '代理',
num: '888881',
name: '测试',
balance: '0.00',
refill: '100011.111',
email: '555555555@169.com',
phone: '11111111111',
time: '2021-07-27 17:45'
}, {
condition: false,
type: '代理',
num: '888882',
name: '测试',
balance: '0.00',
refill: '100011.111',
email: '555555555@169.com',
phone: '11111111111',
time: '2021-07-27 17:45'
}
]
}, {
condition: false,
type: '代理',
num: '888881',
name: '测试asdasdsad',
balance: '0.00',
refill: '100011.111',
email: '555555555@169.com',
phone: '11111111111',
time: '2021-07-27 17:45'
}, {
condition: false,
type: '代理',
num: '888882',
name: '测试',
balance: '0.00',
refill: '100011.111',
email: '555555555@169.com',
phone: '11111111111',
time: '2021-07-27 17:45'
}
],
}, {
condition: false,
type: '代理',
num: '888887',
name: '李四asdsadsadsadsadsadasd',
balance: '0.00',
refill: '100011.111',
email: '555555555@169.com',
phone: '11111111111',
time: '2021-07-27 17:45',
children: [
{
condition: false,
type: '代理',
num: '888880',
name: '测试',
balance: '0.00',
refill: '100011.111',
email: '555555555@169.com',
phone: '11111111111',
time: '2021-07-27 17:45'
}, {
condition: false,
type: '代理',
num: '888881',
name: '测试',
balance: '0.00',
refill: '100011.111',
email: '555555555@169.com',
phone: '11111111111',
time: '2021-07-27 17:45'
}, {
condition: false,
type: '代理',
num: '888882',
name: '测试',
balance: '0.00',
refill: '100011.111',
email: '555555555@169.com',
phone: '11111111111',
time: '2021-07-27 17:45'
}
],
}, {
condition: false,
type: '代理',
num: '888886',
name: '王五',
balance: '0.00',
refill: '100011.111',
email: '555555555@169.com',
phone: '11111111111',
time: '2021-07-27 17:45'
}],
defaultProps: {
children: 'children',
label: function(num,name){}
}
};
},
methods: {
handleChange(val) {
console.log(val)
},
onClickLeft(){
window.history.go(-1)
},
main(val){
val.condition = !val.condition;
}
},
watch:{
}
});
Vue.use(vant.Lazyload);
</script>
4、成果展示：
