for_client/src/views/data-fill/components/HcTreeDataV2.vue

<template>
    <el-tree-v2
        ref="ElTreeRef" :class="[ui]" :data="datas" :props="ElTreeProps"
        class="hc-tree-node" :filter-method="filterMethod" :height="treeHeight"></el-tree-v2>
</template>

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

//变量
const ElTreeRef = ref(null)
const ElTreeProps = ref({
    value: 'primaryKeyId',
    label: 'title',
    children: 'children',
})
const treeHeight = ref(0)

const isSubmitCounts = ref(props.submitCounts);
const searchInfo = ref(props.searchTreeVal)

//监听
watch(() => [
    props.height,
    props.submitCounts,
    props.searchTreeVal,
], ([height, submitCounts, searchTreeVal]) => {
    console.log('height', height)
    treeHeight.value = height
    isSubmitCounts.value = submitCounts
    searchInfo.value = searchTreeVal
})

//事件
const emit = defineEmits(['menuTap', 'nodeTap', 'changeSearch', 'changetreelaod'])

//节点被点击
const ElTreeClick = async (data, node) => {
    console.log('node', node)
    console.log('data', data)
}

//筛选树节点
const filterMethod = (query, node) => {
    console.log('query',query)
    return node.label?.includes(query)
}

// 暴露出去
defineExpose({

})
</script>

<style lang="scss" scoped>
@import "../../../styles/app/tree.scss";
</style>
<style lang="scss">
.el-tree.hc-tree-node .el-tree-node {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .el-tree-node_content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>