修改Element-ui中tree组件最底层节点的样式

Posted 2023-04-03

参考技术A 最近在项目中，设计将tree组件里最底层的节点布局设计成了多列，那要怎么实现呢？

首先用自定义节点的方式渲染节点，在渲染方法里给最底层节点添加class

添加class后，在节点展开的事件里给需要多列显示的节点添加样式

最终效果

element-ui tree 根据不同叶子节点设置是否显示复选框

公司业务要求不同根节点配置显示与否复选框，官方文档没有这样的配置，所以想到了修改element-ui源码。

1.这里将“node_moduleselement-uipackages”下的tree文件夹整体复制到自己的项目目录（customComponent）中

2.修改tree.vue

      <el-checkbox
        v-if="showCheckbox"
        :style="{ ‘visibility‘: node.data.leaf?‘hidden‘:‘visible‘ }"
        v-model="node.checked"
        :indeterminate="node.indeterminate"
        :disabled="!!node.disabled"
        @click.native.stop
        @change="handleCheckChange"
      >
      </el-checkbox>
　　　<!-- 上面第三行是我添加的，node.data.leaf是后台传过来的标识，用来判断是否显示复选框，大家根据自己的树数据进行更换 -->

3.在使用到tree组件的文件中引入tree.vue,并且声明一下就可以使用了，跟使用<el-tree>的方式一样。

参考文章：https://www.jianshu.com/p/5290ef00829f