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

<template>
    <el-tree node-key="id" default-expand-all :data="dataTree" :props="defaultProps">
        <template #default="{ node, data }">
            <el-tooltip effect="dark" :content="data.scriptTypeName" placement="top" :hide-after="0">
                <div class="custom-tree-node">
                    {{ data.scriptTypeName }}
                </div>
            </el-tooltip>
        </template>
    </el-tree>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { getTreeData } from '@/api/check/test'
import { CheckData } from '@/api/check/interface'
const dataTree = ref<CheckData.TreeItem[]>([])
const defaultProps = {
    children: 'children',
    label: 'scriptTypeName',
    pid: 'pid'
}
const open = () => {
    getTreeData({
        scriptId: 'a303b2224845fcc6f60198b8ca23dca9'
    }).then(res => {
        dataTree.value = res.data
    })
}
onMounted(() => {
    open()
})
</script>
<style lang="scss" scoped>
.custom-tree-node {
    max-width: 230px;
    overflow-x: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}
</style>