一. 在components下定义treeNode树形组件
<!-- treeNode.vue -->
<template>
<view>
<view :class="['item--list',item.is_level!=1&&'pL']" v-for="(item, index) in list" :key="index">
<view class="item--row">
<view class="item--title" @click.stop="handleOpenClose(item, index)">
<view class="icon-wrap">
<u-icon :name="!item.isOpen?'arrow-down-fill':'arrow-up-fill'" size="12" color="#a8abb2"
v-if="item.children && item.children.length"></u-icon>
</view>
<view class="item--title--text ofhideellipsis">{{ item.name }}</view>
</view>
<view class="item--btn">
<view :class="['btn',item.is_level==3&&'noActive']">增加子项目</view>
<view class="btn">编辑</view>
<view class="btn">删除</view>
</view>
</view>
<!-- 使用组件本身渲染子项 -->
<view v-if="item.isOpen && item.children && item.children.length">
<treeItem :list="item.children">
</treeItem>
</view>
</view>
</view>
</template>
<script>
// 引入当前组件
import treeItem from '../treeNode/treeNode'
export default {
name: 'treeItem',
components: {
treeItem
},
// 接收列表数据
props: {
list: {
type: Array,
default: () => []
},
},
data() {
return {}
},
onLoad() {},
onShow() {},
mounted() {},
methods: {
// 处理展开或收起
handleOpenClose(item, index) {
// 如果不存在isOpen属性就添加该属性。
if (!item.hasOwnProperty('isOpen')) {
item.isOpen = false
}
item.isOpen = !item.isOpen
this.$forceUpdate()
},
}
}
</script>
<style scoped lang="scss">
.pL {
padding-left: 20rpx;
}
.item--list {
.item--row {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1rpx solid #f7f7f7;
padding: 25rpx 20rpx;
.item--title {
display: flex;
align-items: center;
font-size: 28rpx;
width: 280rpx;
.icon-wrap {
width: 25rpx;
margin-right: 10rpx;
}
}
.item--btn {
display: flex;
.btn {
margin-left: 20rpx;
color: #ff6a00;
}
.noActive {
color: #ccc;
}
}
}
}
.open__and--close {
margin-left: auto;
font-size: 24rpx;
}
.tree__hover-class {
background-color: #f7f7f7;
}
</style>
二. 在页面引入
<template>
<view>
<treeNode :list="subProjectList" ref="treeNodeRef">
</treeNode>
</view>
</template>
<script>
import treeNode from "@/components/treeNode/treeNode.vue"
export default {
components: {
treeNode
},
data() {
return {
subProjectList: [{
"id": 7,
"name": "1栋",
"is_level": 1,
"children": []
},
{
"id": 9,
"name": "3栋",
"is_level": 1,
"children": [{
"id": 14,
"name": "A单元",
"is_level": 2,
"children": []
},
{
"id": 27,
"name": "B单元",
"is_level": 2,
"children": [{
"id": 28,
"name": "6楼",
"is_level": 3,
},
{
"id": 50,
"name": "9999",
"is_level": 3,
}
]
}
]
},
],
}
},
onLoad(options) {},
onShow() {},
mounted() {},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>