pqs-9100_client/frontend/src/views/machine/testScript/components/tree.vue

<template>
    <el-tree node-key="id" default-expand-all :data="props.treeData" :props="defaultProps" style="width: 100%">
        <template #default="{ node, data }">
            <el-tooltip effect="dark" :content="data.scriptTypeName || data.sourceDesc" placement="top" :hide-after="0">
                <div class="custom-tree-node">
                    {{ data.scriptTypeName || data.sourceDesc }}
                </div>
            </el-tooltip>
        </template>
    </el-tree>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'

import { CheckData } from '@/api/check/interface'
const props = defineProps({
    treeData: {
        type: Array,
        required: true
    }
})
const dataTree = ref<CheckData.TreeItem[]>([])
const defaultProps = {
    children: 'children',
    label: 'scriptTypeName',
    pid: 'pid'
}

onMounted(() => {})
// // 对外映射
// defineExpose({ init })
</script>
<style lang="scss" scoped>
.custom-tree-node {
    max-width: 230px;
    overflow-x: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}
</style>