for_client/src/views/tentative/collect/components/HcTreeData.vue

<template>
    <ElTree class="hc-tree-node tree-line" :class="ui" ref="ElTreeRef" :props="ElTreeProps" :data="datas" show-checkbox accordion node-key="primaryKeyId" :indent="0" @check="ElTreeCheckChange"></ElTree>
</template>

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

//变量
const ElTreeRef = ref(null)
const treeData = ref(props.datas)
const ElTreeProps = ref({
    label: 'title',
    children: 'children',
    isLeaf: 'notExsitChild'
})

//监听
watch(() => [
    props.datas,
], ([ datas ]) => {
    treeData.value = datas
})

//事件
const emit = defineEmits(['change'])

//节点勾选
const ElTreeCheckChange = (data, checkeds) => {
    emit('change', {data, checkeds})
}
</script>

<style lang="scss" scoped>
@import "../../../../styles/app/tree.scss";
</style>