element-tree-line el-tree 添加结构线 添加虚线

概览:给element组件添加上虚线,通过使用插件element-tree-line

参考连接:

参考别人的博客

安装插件:

npm

npm install element-tree-line -S

yarn

yarn add element-tree-line -S

main.js全局注册引入插件:

javascript 复制代码
import { getElementLabelLine } from 'element-tree-line';
import 'element-tree-line/dist/style.css';
const ElementLabelLine = getElementLabelLine(h);
app.component(ElementLabelLine.name, ElementLabelLine);

el-tree组件封装:

html 复制代码
<template>
    <el-tree ref="treeRef" class="tree-content" :data="props.treeData" node-key="id" :highlight-current="true"
        :props="props.defaultProps" icon="none" :current-node-key='0' default-expand-all :indent="props.treeIndent">
        <template #default="{ node, data }">
            <element-tree-line :node="node" :showLabelLine="false" :indent="props.treeIndent">
                <template v-slot:node-label>
                    <div class="com-tree">
                        <i v-if="data.children?.length > 0"
                            :class="node.expanded ? 'iconfont icon-pinleijianshao' : 'iconfont icon-pinleizengjia'"
                            class="tree-icon"></i>
                        <span class="com-tree-text" @click="nodeClick(data)">{{ node.label }}</span>
                    </div>
                </template>
            </element-tree-line>
        </template>
    </el-tree>
</template>

<script setup>
let props = defineProps({ treeData: Array, defaultProps: Object, treeIndent: Number });
const emits = defineEmits(['nodeClick']);
const nodeClick = (data) => {
    emits('nodeClick', data);
};
</script>

el-tree页面组件使用:

html 复制代码
<el-scrollbar>
        <Tree 
            :treeData="data.treeData" 
            :defaultProps="defaultProps" 
            :treeIndent="data.treeIndent"
            @nodeClick="hanleNodeClick">
        </Tree>
</el-scrollbar>

效果展示:

相关推荐
脑袋大大的3 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0113 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆2 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆3 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
goldenocean3 小时前
React之旅-05 List Key
前端·javascript·react.js
Mintopia5 小时前
像素的进化史诗:计算机图形学与屏幕的千年之恋
前端·javascript·计算机图形学