uniapp 树形结构树 组件

哒哒 成品图 点击树的箭头展开 点击文字加载对应组下的人员列表

image.png

1.创建一个组件 tree-node.vue

<template>
    <view class="tree-item">
        <view class="head">
            <image src="../../static/new/down-rect.png"  @click.stop="changeShow" :class="show ? 'rt45' : ''" mode="scaleToFill" class="left-icon" 
                v-if="item[defaultProps.children] && item[defaultProps.children].length > 0"></image>
            <text @click="changeClick(item)" class="txt">{{item.orgName}}</text>
        </view>
        <view class="content" 
            v-if="item[defaultProps.children] && item[defaultProps.children].length > 0"
            v-show="show">
            <tree-node v-for="sitem in item[defaultProps.children]" 
                :item="sitem" 
                :key="sitem[defaultProps.id]" :defaultProps="defaultProps"></tree-node>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'TreeNode',
        componentName: 'TreeNode',
        props: {
            item: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        inject: ['defaultProps', 'onClickItem'],
        data() {
            return {
                show: false
            }
        },
        methods: {
            changeClick(item){
                this.onClickItem(item);
            },
            changeShow() {
                console.log(33)
                // this.onClickItem(this.item);
                if (this.item[this.defaultProps.children] && this.item[this.defaultProps.children].length > 0) {
                    this.show = !this.show;
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    @mixin animate2 {
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear;
        -o-transition: all .2s linear;
        -ms-transition: all .2s linear;
        transition: all .2s linear;
    }
    .tree-item{
        .head{
            display: flex;
            align-items: center;
            line-height: 60rpx;
            .txt{
                font-size: 28rpx;
                color: #222;
                // width: 100px;
                    overflow: hidden;  //超出隐藏
                    white-space: nowrap; //不折行
                    text-overflow: ellipsis; //溢出显示省略号
            }
        }
        .left-icon{
            width: 40rpx;
            height: 40rpx;
            @include animate2;
            transform: rotate(-90deg);
            -ms-transform:rotate(-90deg);
            -moz-transform:rotate(-90deg);
            -webkit-transform: rotate(-90deg);
            -o-transform:rotate(-90deg);
            &.rt45{
                transform: rotate(0deg);
                -ms-transform:rotate(0deg);
                -moz-transform:rotate(0deg);
                -webkit-transform: rotate(0deg);
                -o-transform:rotate(0deg);
            }
        }
        .content{
            padding-left: 40rpx;
        }
    }
    
</style>

2.页面引用，应用

<treeNode class="person-tree" v-for="item in orgdata" :item="item" :key="item[defaultProps.id]" :defaultProps="defaultProps">
</treeNode>

import treeNode from './tree-node.vue';
<script>
    import treeNode from './tree-node.vue';
    import {
        SEX_STATUS,
        USER_STATUS
    } from '@/common/data.js';
    export default {
        components: {
            treeNode
        },
        props: {
            treedata: {
                type: Array,
                default: () => {
                    return []
                }
            },
            defaultProps: {
                type: Object,
                default: () => {
                    return {
                        id: 'id',
                        children: 'children',
                        label: 'label'
                    }
                }
            }
        },
        provide() {
            return {
                defaultProps: this.defaultProps,
                onClickItem: this.onClickItem
            }
        },
        data() {
            return {
                orgdata: this.treedata,//不可以直接改变父元素的值  转了一下
                listData: [],
            }
        },
        onLoad() {
            this.getTreeList();
        },
        methods: {
            // 获取组织结构树
            async getTreeList() {
                const {
                    data
                } = await this.$http({
                    method: 'GET',
                    url: `core/org/tree`,
                });
                if (data.code === this.$C.netWorkStatus) {
                    this.orgdata = data.data
                    this.orgId = data.data[0].orgId
                    this.getList()
                } else {
                    uni.showToast({
                        title: data.message,
                        icon: 'none'
                    });
                }
            },
        
            onClickItem(e) {
                this.orgId = e.orgId
                    this.userName = ''
                this.getList()
                // this.$emit('node-click', e);
            }
        }
    }
</script>