hac/src/views/system/components/HcTreeData.vue

<template>
    <ElTree
        ref="ElTreeRef" :class="ui" :data="treeDatas" default-expand-all :indent="0" :props="ElTreeProps"
        class="hc-tree-node tree-line" highlight-current node-key="id" @node-click="ElTreeClick"
    >
        <template #default="{ node, data }">
            <div class="data-custom-tree-node">
                <div :class="node.level === 1 ? 'level-name' : ''" class="label">
                    <span class="mr-5">{{ node.label }}</span>
                    <!-- <HcIcon v-if="node.level < 3" class="hc-tree-node-icon-add" name="add-box" @click.stop="addClick(node, data)" /> -->
                    <HcIcon v-if="data.deptType !== 3" class="hc-tree-node-icon-add" name="add-box" @click.stop="addClick(node, data)" />
                    <HcIcon class="hc-tree-node-icon-edit" name="edit" @click.stop="editClick(node, data)" />
                    <HcIcon v-if="node.level !== 1" class="hc-tree-node-icon-del" name="delete-bin" @click.stop="delClick(node, data)" />
                    <HcIcon v-if="node.level !== 1" class="hc-tree-node-icon-vip" name="vip-crown-2" @click.stop="authorityClick(node, data)" />
                </div>
            </div>
        </template>
    </ElTree>
</template>

<script setup>
import { ref, watch } from 'vue'
//参数
const props = defineProps({
    ui: {
        type: String,
        default: '',
    },
    datas: {
        type: Object,
        default: () => ({}),
    },
})

//事件
const emit = defineEmits(['menuTap', 'nodeTap'])
//变量
const ElTreeRef = ref(null)
const treeDatas = ref([props.datas])
const ElTreeProps = ref({
    label: 'label',
    children: 'children',
    isLeaf: 'isLeaf',
})

//监听
watch(() => [
    props.datas,
], ([data]) => {
    treeDatas.value = [data]
}, { deep: true })

//节点被点击
const ElTreeClick = async (data, node) => {
    emit('nodeTap', { node, data })
}

//添加
const addClick = (node, data)=>{
    emit('menuTap', {
        key: 'add', node, data,
    })
}

//编辑
const editClick = (node, data) => {
    emit('menuTap', {
        key: 'edit', node, data,
    })
}

//删除
const delClick = (node, data) => {
    emit('menuTap', {
        key: 'del', node, data,
    })
}

//权限
const authorityClick = (node, data) => {
    emit('menuTap', {
        key: 'auth', node, data,
    })
}
</script>

<style lang="scss" scoped>
@import "~src/styles/app/tree.scss";
.data-custom-tree-node {
    .hc-tree-node-icon-add {
        color: rgb(84, 188, 189);
        margin-right: 8px;
    }
    .hc-tree-node-icon-edit {
        color: rgb(84, 188, 189);
    }
    .hc-tree-node-icon-del {
        margin-left: 8px;
        color: orange;
    }
    .hc-tree-node-icon-vip {
        margin-left: 8px;
        color: purple;
    }
}
</style>