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>

效果展示:

相关推荐
木头没有瓜1 小时前
vscode离线安装插件
ide·vue.js·vscode
浪裡遊2 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
夏梦春蝉3 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
我想说一句3 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
markyankee1013 小时前
使用 Vue 脚手架创建项目的完整指南
vue.js
南屿im3 小时前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript
青松学前端3 小时前
vue-2.7源码解读之初始化流程和响应式实现
前端·vue.js·前端框架
杨进军3 小时前
前端线上问题的那些事儿
前端·javascript·前端框架
每天开心3 小时前
深入探索 React Hooks: useState 与 useEffect 的力量 🌟
前端·javascript·ai编程
流星稍逝3 小时前
Vue3 + Uniapp 图片压缩公共方法封装
前端·vue.js