如何更改Element的Tree组件，达到UI的设计标准

大花也是花
150 阅读4分钟

事情的起因

前段时间换到一个新的项目组，接到这样的一个需求，在描述需求之前，我们先描述一下这个需求背景。

我们后台管理系统中，有一个页面管理页面，刚开始的时候，这个页面的功能比较简单，就是新建页面完成后，直接以列表的形式展示在B端，而这些新建的页面，其实分别对应C端的展示，就是达到，在配置B端页面后，可以实时更新C端页面的展示。随着B端页面创建的越来越多，以列表展示的方式，导致页面难以管理，不太满足需求了。

产品提出需要增加组的概念，来管理这些页面，不同的页面，可以放入不同的组，方便使用者对这些页面更加精细控制，快速找到需要的页面。其功能类似下面这样的示意图。

4f664342ae0032dff52a150a7386805.png

需要支持页面可以拖拽到其他组，组的展开折叠，现在回头看刚才描述的这个需求，是不是Tree组件，完全满足我们的要求，既然有现成的组件，何必自己写，拿来直接使用就行。

使用Tree组件遇到的问题

在实际使用中，发现组件支持的自定义节点内容，无法满足我的要求。

image.png

此时，我的第一想法，是去修改源码，此时，在写这篇文章的时候，我感觉我脑壳有包，其实可以非常简单的 使用CSS处理，再加上数据的处理就能达到效果，我却要去修改人家源码，我怎么敢的，哪里来的勇气。可能 就在那个时候，脑子短路。

如何修改源码，并引入项目中使用

image.png

  • 直接github下载源码，找到tree组件，更改了自定义节点那部分代码（说实话，我现在已经不记得我当时是改动那部分代码，因为现在的我，实在理解不了当时为啥做这么xx的行为了）

  • 因为项目已经引入了element的组件，如何兼容element的tree组件和我们修改之后的tree组件。我进行了下面的处理。

    1. 直接引入源码tree组件的整个目录到项目的src目录下。

    image.png

    1. 修改关于自定义节点的那部分代码。
    2. 注册自定义的tree组件。
    import Tree from './src/tree.vue';
Tree.install = function(Vue) {
  Vue.component('customTree', Tree);
};
export default Tree;
    1. 项目中使用，这样项目就可以兼容使用，element的Tree组件和我们改良版本的custom-tree自定义Tree组件。
    <custom-tree>
// .....
</custom-tree>

修改之后，带来的问题

修改源码之后，就带来了一些维护问题

  • 如果Tree组件升级了，或者出现什么bug。修复更新了版本，那我们自定义的Tree需要更新同步维护嘛。
  • 明明就修改了一点点内容，却要拷贝整个Tree的源码。导致我们项目的代码量增加，后面维护者可能出现混乱的情况，不知道该如何选择合适的Tree组件。

被打开脑子后的修改版本

跟领导review之后，他觉得我的脑子有问题，我觉得他说的对。以光的速度抛弃了修改源码的方式，最终思考出用样式修改的方式了。此时在写这篇文章的时候，我都还是想不通，我为啥要修改源码。

其实样式修改方式也不难，直接把el-tree-node__content的节点，修改布局为display:block; 自定义节点内容，放入div中，再微调一些样式，对父节点和子节点数据处理下，就行。

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  default-expand-all
  :expand-on-click-node="false">
  <div class="custom-tree-node" slot-scope="{ node, data }">
    <div>{{ node.label }}</div>
    <img src="xxx.jpg"/>
  </div>
  </el-tree>

结尾

虽然走了一些弯路，但是至少浅浅看了一些Tree组件是怎么实现的，把element项目跑起来了。对如何修改源码，引入项目，跟原有组件不冲突，也算浅浅了解一下。总结出来就是，遇事别冲动，多想想还有没有其他的解决方法，不要轻易修改源码，除非实在是必要。

如有错误，恳请指正

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情

avatar
文章
阅读
粉丝