vue3中如何动态计算树形图边框高度

首先看实现效果

image.png

根据树形图改装的样式，在动态增加删除，让左边边框保持在树形的父级标签上，所以需要动态计算树形吐最后一个对象里数组的长度，

直接上代码：

在模板中使用 style 绑定来动态设置 before 伪元素的样式：

template

                    @node-click="openDrawer" :expand-on-click-node="false" default-expand-all highlight-current
                    :props="defaultProps" :default-expanded-keys="[1]" :data="treeData" node-key="uniqueidentification">
                    <template #default="{ node, data }">
                        <div class="custom-tree-node">

                            <!-- 树图里的代码 -->
</div>
</el-tree>

script

<script setup lang="ts">

// 树型数据
const treeData: any = ref(
    [
        {
            label: 'AccessAddress',
            id: 1,
            expanded: true,
            isRule: false
        }, {
            label: 'DetectionMethod',
            id: 2,
            disabled: true,
            expanded: true,
            isRule: true,
            children: [
                {
                    label: 'ICMP',
                    id: 0,
                    isRule: false,
                }, {
                    label: 'TCP',
                    id: 1,
                    isRule: false,
                }, {
                    label: 'HTTP(S)',
                    id: 2,
                    isRule: false,
                    children: [
                        {
                            label: 'Authentication',
                            id: 0,
                            isRule: false,
                        }, {
                            label: 'Detect',
                            id: 1,
                            isRule: false,
                        }
                    ],
                },
            ],
        },
    ]
)
const beforeHeight = ref('');
// 动态计算树形图最后一个HTTPS数组里的length长度，100% - 数组高度 * 46px 
watch(
    () => treeData.value,
    () => {
        const lastObject = treeData.value[1].children[treeData.value[1].children.length - 1].children.length;
        beforeHeight.value = `${lastObject * 46}px`;
    }, { deep: true });
</script>

然后，在样式中使用 :before 伪元素和 var(--before-height) 来设置高度：

style

<style lang="less" scoped>
    .el-tree-node:before {
        border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
        bottom: 0px;
        height: calc(100% - var(--before-height));
        left: 26px;
        top: -22px;
        width: 1px;
        z-index: 999;
    }

</style>

在上述代码中，我们使用 style 绑定来设置 .el-tree-node 元素的 --before-height 自定义属性，并将 beforeHeight 的值作为绑定的值。然后，在 ::before 伪元素的样式中使用 var(--before-height) 来动态获取高度。

image.png

多添加几个的效果，收工