uniapp 树形组件、机构选择组件、部门选择组件、递归组件的简单实现。
uniapp 树形组件、机构选择组件、部门选择组件、递归组件的简单实现。
·
uniapp 树形组件、机构选择组件、部门选择组件、递归组件的简单实现。
效果
在components目录下定义组件treeNode.vue
<!-- treeNode.vue -->
<template>
<view>
<view
class="item--list"
v-for="(item, index) in list"
:key="index"
>
<view class="item--title" hover-class="tree__hover-class" @click="selectNode(item)">
<view>{{ item.name }}</view>
<view
v-if="item.children && item.children.length"
class="open__and--close"
@click.stop="handleOpenClose(item, index)"
>
{{ item.isOpen?'收起':'展开'}}</view>
</view>
<!-- 使用组件本身渲染子项 -->
<view v-if="item.isOpen && item.children && item.children.length" class="">
<treeItem :list="item.children" @change="selectNode"></treeItem>
</view>
</view>
</view>
</template>
<script>
// 引入当前组件
import treeItem from '../treeNode/treeNode'
export default {
name: 'treeItem',
components: {
treeItem
},
// 接收列表数据
props: {
list: {
item: Array,
default: () => []
}
},
methods: {
// 选中
selectNode(item) {
this.$emit('change', item)
},
// 处理展开或收起
handleOpenClose(item, index) {
// 如果不存在isOpen属性就添加该属性。
if (!item.hasOwnProperty('isOpen')) {
item.isOpen = false
}
item.isOpen = !item.isOpen
this.$forceUpdate()
}
}
}
</script>
<style scoped>
.item--list {
padding-left: 25rpx;
}
.item--title {
display: flex;
align-items: center;
font-size: 28rpx;
border-bottom: 1rpx solid #f7f7f7;
padding: 25rpx;
}
.open__and--close {
margin-left: auto;
font-size: 24rpx;
}
.tree__hover-class {
background-color: #f7f7f7;
}
</style>
在页面中使用
<template>
<view style="padding-right: 25rpx;">
<treeNode :list="list" @change="treeChange"></treeNode>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
id: '1',
name: '机构一',
children: [
{
id: '101',
name: '人事部',
children: []
},{
id: '102',
name: '总部',
children: [
{
id: '1021',
name: '选项一',
children: []
},{
id: '1022',
name: '选项二',
children: []
},{
id: '1023',
name: '选项三',
children: []
}
]
},{
id: '103',
name: '后勤部',
children: []
}
]
},{
id: '12',
name: '机构二',
children: [
{
id: '10121',
name: '选项一',
children: []
},{
id: '10122',
name: '选项二',
children: []
},{
id: '10123',
name: '选项三',
children: []
}
]
},{
id: '13',
name: '机构三',
children: [{
id: '10131',
name: '选项一',
children: []
},{
id: '10132',
name: '选项二',
children: []
},{
id: '10133',
name: '选项三',
children: []
}]
}]
}
},
methods: {
treeChange(e) {
uni.showToast({
title: `选中的值:${e.name}`,
icon: 'none'
})
}
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)