优雅地给element-ui和element-plus的el-tree控件添加结构线

置顶

cn_zgt_imp

已于 2022-01-24 17:59:24 修改

阅读量9.7k

点赞数 22

分类专栏：组件 Vue 文章标签： elementui vue 树结构

于 2021-10-30 13:52:18 首次发布

本文链接：https://blog.csdn.net/cn_zgt_boss/article/details/121049766

版权

优雅地给element-ui和element-plus的el-tree控件添加结构线

在这里插入图片描述

看 element-ui issues 有不少人提到 el-tree 结构线的需求，官方依然没有支持，我也有这个需求，有搜索到一些直接覆盖 el-tree 的 css 做法，在节点缩进、点击行效果、拖拽等方面没有很贴合的效果，并不是我想要的

在这里插入图片描述

于是我写了element-tree-line这个组件，作为el-tree子组件的方式，无侵入性，可插拔，很优雅的添加结构线。

原理是利用el-tree的slot，添加对应节点的n个span元素生成线条再精确定位。

element-tree-line

查看Github

这是一个给 element-ui和element-plus的 el-tree 添加结构线的子组件，不会对 el-tree 原有的功能造成任何的影响，同时能够支持element-plus 的 Virtualized Tree 虚拟树，有了线的展示，从美观和树形结构清晰上都有很好的体现。（我总是在做不是很重要的东西，哈哈）

安装与使用

# npm
npm install element-tree-line -S

# yarn
yarn add element-tree-line -S

Used in vue2 + element-ui

// 全局注册组件
import Vue from 'vue';
import ElementTreeLine from 'element-tree-line';
// css
import 'element-tree-line/dist/style.css';
// or scss
// import 'element-tree-line/dist/style.scss';

Vue.component(ElementTreeLine.name, ElementTreeLine);

// or 局部注册组件
import ElementTreeLine from 'element-tree-line';
// css
import 'element-tree-line/dist/style.css';
// or scss
// import 'element-tree-line/dist/style.scss';

export default {
   
    components: {
    ElementTreeLine },
    data() {
   
        return {
   };
    },
};

案例效果

在这里插入图片描述

<template>
    <el-card shadow="never" :body-style="{ padding: '20px 0px 20px 20px' }">
        <div style="margin-bottom: 10px">
            <span style="margin-right: 5px">showLabelLine</span>
            <el-switch v-model="treeProps['showLabelLine']"></el-switch>
            <span style="margin-left: 20px;margin-right:5px;">indent</span>
            <el-input-number v-model="treeProps['indent']"></el-input-number>
        </div>
        <el-tree
            ref="tree"
            :data="data"
            draggable=""
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
            :indent="treeProps['indent']"
        >
            <template v-slot:default="{ node }">
                <element-tree-line
                    :node="node"
                    :showLabelLine="treeProps['showLabelLine']"
                    :indent="treeProps['indent']"
                >
                    <!-- 自定义label的slot -->
                    <template v-slot:node-label>

最低0.47元/天解锁文章