devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

如何对ElementUI、ElementPlus中的Tree树组件进行美化，如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果？本文给你答案！_element ui 树形控件样式美化

作者：Monodyee | 2024-03-21 23:52:47

赞

踩

element ui 树形控件样式美化

ElementUI、ElementPlus树组件功能很不错，但是官方的树形组件没有显示线条，感觉稍微不够大气。于是网上查了一些资料，找了很多也感觉也不够完美，最后找到一个还不错的实现方案，并且再美化改进一下，分享给大家。

一、基于Vue2+ElementUI的例子

（1）示例代码

  1. <template>
  2.   <div class="tree-container">
  3.     <div style="padding: 20px;">
  4.       <el-checkbox v-model="isSelectAll" @change="handleCheckedAllTreeNodeChange">全选/全不选</el-checkbox>
  5.       
  6.       <el-button size="mini" style="margin-left: 20px;" @click="handleGetCheckedNodesAndKeys(true)">获取已勾选节点</el-button>
  7.     </div>
  8.  
  9.     <el-tree
  10.       ref="treeRef"
  11.       show-checkbox
  12.       icon-class="el-icon-arrow-right"
  13.       :node-key="'id'"
  14.       :data="treeList"
  15.       :props="defaultProps"
  16.       :default-expand-all="true"
  17.       :expand-on-click-node="false"
  18.       :default-checked-keys="[5]"
  19.     >
  20.       <span slot-scope="{ data }">
  21.         <template v-if="data.children">
  22.           <div v-if="data.children.length > 0">
  23.             <!-- <i class="el-icon-folder" :style="'font-size: 14px; padding: 0 5px 0 5px'"/> -->
  24.             <i :style="'font-size: 13px; padding: 0 5px 0 5px'"><svg viewBox="64 64 896 896" data-icon="apartment" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M908 640H804V488c0-4.4-3.6-8-8-8H548v-96h108c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16H368c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h108v96H228c-4.4 0-8 3.6-8 8v152H116c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h288c8.8 0 16-7.2 16-16V656c0-8.8-7.2-16-16-16H292v-88h440v88H620c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h288c8.8 0 16-7.2 16-16V656c0-8.8-7.2-16-16-16zm-564 76v168H176V716h168zm84-408V140h168v168H428zm420 576H680V716h168v168z"></path></svg></i>
  25.             <span>{{ data.id + ' - ' + data.label }}</span>
  26.           </div>
  27.  
  28.           <div v-else>
  29.             <i class="leaf-node-line"></i>
  30.             <!-- <i class="el-icon-folder" :style="'padding: 0 5px 0 5px'"/> -->
  31.             <i :style="'font-size: 13px; padding: 0 5px 0 5px'"><svg viewBox="64 64 896 896" data-icon="apartment" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M908 640H804V488c0-4.4-3.6-8-8-8H548v-96h108c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16H368c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h108v96H228c-4.4 0-8 3.6-8 8v152H116c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h288c8.8 0 16-7.2 16-16V656c0-8.8-7.2-16-16-16H292v-88h440v88H620c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h288c8.8 0 16-7.2 16-16V656c0-8.8-7.2-16-16-16zm-564 76v168H176V716h168zm84-408V140h168v168H428zm420 576H680V716h168v168z"></path></svg></i>
  32.             <span>{{ data.id + ' - ' + data.label }}</span>
  33.           </div>
  34.         </template>
  35.  
  36.         <template v-else>
  37.           <div style="margin-left: 0px;">
  38.             <i class="leaf-node-line"></i>
  39.             <!-- <i class="el-icon-document" :style="'padding: 0 5px 0 5px'"></i> -->
  40.             <i :style="'font-size: 13px; padding: 0 5px 0 5px'"><svg viewBox="64 64 896 896" data-icon="deployment-unit" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M888.3 693.2c-42.5-24.6-94.3-18-129.2 12.8l-53-30.7V523.6c0-15.7-8.4-30.3-22-38.1l-136-78.3v-67.1c44.2-15 76-56.8 76-106.1 0-61.9-50.1-112-112-112s-112 50.1-112 112c0 49.3 31.8 91.1 76 106.1v67.1l-136 78.3c-13.6 7.8-22 22.4-22 38.1v151.6l-53 30.7c-34.9-30.8-86.8-37.4-129.2-12.8-53.5 31-71.7 99.4-41 152.9 30.8 53.5 98.9 71.9 152.2 41 42.5-24.6 62.7-73 53.6-118.8l48.7-28.3 140.6 81c6.8 3.9 14.4 5.9 22 5.9s15.2-2 22-5.9L674.5 740l48.7 28.3c-9.1 45.7 11.2 94.2 53.6 118.8 53.3 30.9 121.5 12.6 152.2-41 30.8-53.6 12.6-122-40.7-152.9zm-673 138.4a47.6 47.6 0 0 1-65.2-17.6c-13.2-22.9-5.4-52.3 17.5-65.5a47.6 47.6 0 0 1 65.2 17.6c13.2 22.9 5.4 52.3-17.5 65.5zM522 463.8zM464 234a48.01 48.01 0 0 1 96 0 48.01 48.01 0 0 1-96 0zm170 446.2l-122 70.3-122-70.3V539.8l122-70.3 122 70.3v140.4zm239.9 133.9c-13.2 22.9-42.4 30.8-65.2 17.6-22.8-13.2-30.7-42.6-17.5-65.5s42.4-30.8 65.2-17.6c22.9 13.2 30.7 42.5 17.5 65.5z"></path></svg></i>
  41.             <span>{{ data.id + ' - ' + data.label }}</span>
  42.           </div>
  43.         </template>
  44.       </span>
  45.     </el-tree>
  46.   </div>
  47. </template>
  48.  
  49. <script>
  50. export default {
  51.   data() {
  52.     return {
  53.       // 树列表
  54.       treeList: [
  55.         {
  56.           id: 1,
  57.           label: "香烟 WiFi 啤酒",
  58.           children: [
  59.             {
  60.               id: 3,
  61.               label: '香烟',
  62.               children: [
  63.                 {
  64.                   id: 4,
  65.                   label: '煊赫门',
  66.                 },
  67.                 {
  68.                   id: 5,
  69.                   label: 'ESSE双爆珠',
  70.                   disabled: true,
  71.                 },
  72.               ],
  73.             },
  74.             {
  75.               id: 2,
  76.               label: '后端开发技术',
  77.               disabled: true,
  78.               children: [
  79.                 {
  80.                   id: 6,
  81.                   label: 'Java编程技术',
  82.                   children: [],
  83.                 },
  84.                 {
  85.                   id: 7,
  86.                   label: '数据库',
  87.                   disabled: true,
  88.                   children: [
  89.                     {
  90.                       id: 8,
  91.                       label: '关系型数据库',
  92.                       children: [
  93.                         {
  94.                           id: 9,
  95.                           label: 'MySQL',
  96.                         },
  97.                         {
  98.                           id: 10,
  99.                           label: 'Oracle',
  100.                           disabled: true,
  101.                         },
  102.                       ],
  103.                     },
  104.                     {
  105.                       id: 11,
  106.                       label: '非关系型数据库',
  107.                       children: [
  108.                         {
  109.                           id: 12,
  110.                           label: 'Redis',
  111.                         },
  112.                         {
  113.                           id: 13,
  114.                           label: 'Elasticsearch',
  115.                           disabled: true,
  116.                         },
  117.                       ],
  118.                     }
  119.                   ],
  120.                 },
  121.               ],
  122.             },
  123.           ],
  124.         },
  125.       ],
  126.  
  127.       // 对象关系映射
  128.       defaultProps: {
  129.         label: 'label',
  130.         children: 'children',
  131.       },
  132.  
  133.       // 是否全选所有节点标志
  134.       isSelectAll: false,
  135.     };
  136.   },
  137.   methods: {
  138.     /**
  139.      * 是否全选所有节点
  140.      */
  141.     handleCheckedAllTreeNodeChange() {
  142.       if (this.isSelectAll) {
  143.         // 深度遍历将子节点全选中
  144.         for (let i = 0; i < this.treeList.length; i++) {
  145.           this.$refs.treeRef.setChecked(this.treeList[i], true, true);
  146.         }
  147.       } else {
  148.         // 全部不选中
  149.         this.$refs.treeRef.setCheckedNodes([]);
  150.       }
  151.  
  152.       const leafOnly = true;
  153.       this.handleGetCheckedNodesAndKeys(leafOnly);
  154.     },
  155.  
  156.     /**
  157.      * 获取当前已被选中的节点集合
  158.      */
  159.     handleGetCheckedNodesAndKeys(leafOnly) {
  160.       console.log('getCheckedNodes =>', this.$refs.treeRef.getCheckedNodes(leafOnly));
  161.       console.log('getCheckedKeys =>', this.$refs.treeRef.getCheckedKeys(leafOnly));
  162.     }
  163.   },
  164. }
  165. </script>
  166.  
  167. <style lang="less" scoped>
  168.   // 设置树形组件节点的定位和左内边距
  169.   .tree-container /deep/ .el-tree-node {
  170.     position: relative;
  171.     padding-left: 13px;
  172.   }
  173.  
  174.   // 设置树形组件节点的 before 伪类的样式
  175.   .tree-container /deep/ .el-tree-node:before {
  176.     width: 1px;
  177.     height: 100%;
  178.     content: '';
  179.     position: absolute;
  180.     top: -38px;
  181.     bottom: 0;
  182.     left: 0;
  183.     right: auto;
  184.     border-width: 1px;
  185.     border-left: 1px solid #b8b9bb;
  186.   }
  187.  
  188.   // 设置树形组件节点的 after 伪类的样式
  189.   .tree-container /deep/ .el-tree-node:after {
  190.     width: 13px;
  191.     height: 13px;
  192.     content: '';
  193.     position: absolute;
  194.     left: 0;
  195.     right: auto;
  196.     top: 12px;
  197.     bottom: auto;
  198.     border-width: 1px;
  199.     border-top: 1px solid #b8b9bb;
  200.   }
  201.  
  202.   // 设置树形组件首节点的左边框不显示
  203.   .tree-container /deep/ .el-tree > .el-tree-node:before {
  204.     border-left: none;
  205.   }
  206.  
  207.   // 设置树形组件首节点的顶部边框不显示
  208.   .tree-container /deep/ .el-tree > .el-tree-node:after {
  209.     border-top: none;
  210.   }
  211.  
  212.   // 设置树形组件末节点的 before 伪类的高度
  213.   .tree-container /deep/ .el-tree .el-tree-node:last-child:before {
  214.     height: 50px;
  215.   }
  216.  
  217.   // 设置树形组件节点字体大小、以及取消左内边距
  218.   .tree-container /deep/ .el-tree .el-tree-node__content {
  219.     color: #000;
  220.     font-size: 14px;
  221.     padding-left: 0 !important;
  222.   }
  223.  
  224.   // 设置树形组件孩子节点左内边距
  225.   .tree-container /deep/ .el-tree .el-tree-node__children {
  226.     padding-left: 11.5px;
  227.   }
  228.  
  229.   // 设置树形组件复选框左右外边距
  230.   .tree-container /deep/ .el-tree .el-tree-node__content > label.el-checkbox {
  231.     margin: 0 5px 0 5px !important;
  232.   }
  233.  
  234.   // 设置树形组件展开图标定位、图层、内边距
  235.   .tree-container /deep/ .el-tree .el-tree-node__expand-icon {
  236.     position: relative;
  237.     z-index: 99;
  238.   }
  239.  
  240.   // 设置树形组件叶子节点的默认图标不显示
  241.   .tree-container /deep/ .el-tree .el-tree-node__expand-icon.is-leaf {
  242.     display: none;
  243.   }
  244.  
  245.   // 设置树形组件叶子节点的横线
  246.   .tree-container /deep/ .el-tree .leaf-node-line {
  247.     width: 23px;
  248.     height: 13px;
  249.     content: '';
  250.     position: absolute;
  251.     left: 13px;
  252.     right: auto;
  253.     top: 12px;
  254.     bottom: auto;
  255.     border-width: 1px;
  256.     border-top: 1px solid #b8b9bb;
  257.   }
  258.  
  259.   // 设置树形组件有叶子节点的左外边距
  260.   .tree-container /deep/ .el-tree .el-tree-node__content:has(.is-leaf){
  261.     // color: aqua;
  262.     margin-left: 24px !important;
  263.   }
  264. </style>

（2）效果如下~

二、基于Vue3+ElementPlus的例子

1.普通示例

（1）示例代码

  1. <template>
  2.   <div class="element-plus-tree">
  3.     <el-tree
  4.       :data="treeData"
  5.       :props="defaultProps"
  6.       :show-checkbox="false"
  7.       :default-expand-all="true"
  8.       :highlight-current="true"
  9.       :expand-on-click-node="false"
  10.       :indent="22"
  11.     >
  12.       <template #default="{ node, data }">
  13.         <span v-if="!node.isLeaf" style="display: flex; align-items: center;">
  14.           <el-icon v-if="node.expanded" style="margin: 0 6px 0 2px;" size="16"><FolderOpened /></el-icon>
  15.           <el-icon v-else style="margin: 0 6px 0 2px;" size="16"><Folder /></el-icon>
  16.           <small @click="handleNodeClick(node, data)">{{ node.label }}</small>
  17.         </span>
  18.  
  19.         <span v-else style="display: flex; align-items: center;">
  20.           <el-icon style="margin: 0 6px 0 2px;" size="16"><Document /></el-icon>
  21.           <small @click="handleNodeClick(node, data)">{{ node.label }}</small>
  22.         </span>
  23.       </template>
  24.     </el-tree>
  25.   </div>
  26. </template>
  27.  
  28. <script setup>
  29. import { onMounted, ref, getCurrentInstance } from 'vue'
  30.  
  31. // 代理对象
  32. const { proxy } = getCurrentInstance()
  33.  
  34. // 树型数据
  35. const treeData = ref(
  36.   [
  37.     {
  38.       label: '香烟 WiFi 啤酒',
  39.       expanded: true,
  40.       children: [
  41.         {
  42.           label: '香烟',
  43.           children: [
  44.             {
  45.               label: '煊赫门'
  46.             },
  47.             {
  48.               label: 'ESSE双爆珠'
  49.             }
  50.           ],
  51.         },
  52.         {
  53.           label: '后端开发技术',
  54.           children: [
  55.             {
  56.               label: 'Java编程技术'
  57.             },
  58.             {
  59.               label: 'Python编程技术'
  60.             }
  61.           ],
  62.         },
  63.         {
  64.           label: '数据库',
  65.           children: [
  66.             {
  67.               label: '关系型数据库',
  68.               children: [
  69.                 {
  70.                   label: 'MySQL'
  71.                 },
  72.                 {
  73.                   label: 'Oracle'
  74.                 }
  75.               ],
  76.             },
  77.             {
  78.               label: '非关系型数据库',
  79.               children: [
  80.                 {
  81.                   label: 'Redis'
  82.                 },
  83.                 {
  84.                   label: 'Elasticsearch'
  85.                 }
  86.               ],
  87.             }
  88.           ],
  89.         },
  90.         {
  91.           label: 'AI人工智能'
  92.         },
  93.       ],
  94.     },
  95.     {
  96.       label: '火腿 iPad 泡面'
  97.     },
  98.   ]
  99. )
  100.  
  101. // 树节点属性映射关系
  102. const defaultProps = {
  103.   children: 'children',
  104.   label: 'label',
  105. }
  106.  
  107. /**
  108.  * 树组件点击事件句柄方法
  109.  */
  110. const handleNodeClick = (node, data) => {
  111.   console.log(
  112.         '%c 树组件点击事件句柄方法 %c handleNodeClick',
  113.         'padding: 1px; background-color: #35495e; color: #fff',
  114.         'padding: 1px; background-color: #5e7ce0; color: #fff',
  115.       )
  116.       console.log('%c ∟ %c node %c =>', 'text-indent: 10px', 'padding: 1px; background-color: #41b883; color: #fff', 'color: #000', node)
  117.       console.log('%c ∟ %c data %c =>', 'text-indent: 10px', 'padding: 1px; background-color: #41b883; color: #fff', 'color: #000', data)
  118. }
  119.  
  120. onMounted(() => {
  121.   // ...
  122. })
  123. </script>
  124.  
  125. <style lang="less" scoped>
  126.   .element-plus-tree {
  127.     padding: 100px;
  128.  
  129.     :deep(.el-tree) {
  130.  
  131.       .el-tree-node {
  132.         
  133.         /* ^ 所有节点 */
  134.         i.el-tree-node__expand-icon {
  135.           padding: 6px;
  136.  
  137.           &::before {
  138.             font-family: element-ui-icons;
  139.             font-style: normal;
  140.             content: "\e6d9";
  141.             color: #000000;
  142.             border: 1px solid #606266;
  143.             border-radius: 2px;
  144.           }
  145.  
  146.           svg {
  147.             display: none; // 隐藏所有节点的 svg 图标
  148.           }
  149.         }
  150.         /* / 所有节点 */
  151.  
  152.         /* ^ 已展开的父节点 */
  153.         i.el-tree-node__expand-icon.expanded {
  154.           transform: rotate(0deg); // 取消旋转
  155.           -webkit-transform: rotate(0deg); // 取消旋转
  156.  
  157.           &::before {
  158.             font-family: element-ui-icons;
  159.             font-style: normal;
  160.             content: "\e6d8";
  161.             color: #000000;
  162.             border: 1px solid #606266;
  163.             border-radius: 2px;
  164.           }
  165.         }
  166.         /* / 已展开的父节点 */
  167.  
  168.         /* ^ 叶子节点 */
  169.         i.el-tree-node__expand-icon.is-leaf {
  170.  
  171.           &::before {
  172.             display: none;
  173.           }
  174.         }
  175.         /* / 叶子节点 */
  176.  
  177.         /* ^ 复选框 */
  178.         .el-checkbox {
  179.           margin: 0 7px 0 2px;
  180.  
  181.           .el-checkbox__inner {
  182.             width: 14px;
  183.             height: 14px;
  184.             border-radius: 2px;
  185.             border: 1px solid #bbb;
  186.           }
  187.  
  188.           .el-checkbox__input.is-checked .el-checkbox__inner,
  189.           .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  190.             border: 1px solid #5e7ce0;
  191.           }
  192.         }
  193.         /* / 复选框 */
  194.  
  195.         .el-tree-node__content {
  196.           small {
  197.             font-size: 13px;
  198.           }
  199.         }
  200.       }
  201.     }
  202.   }
  203. </style>

（2）效果如下~

2.高级示例

（1）示例代码

  1. <template>
  2.   <div class="element-plus-tree">
  3.  
  4.     <el-tree
  5.       :data="treeData"
  6.       :props="defaultProps"
  7.       :show-checkbox="true"
  8.       :default-expand-all="true"
  9.       :highlight-current="true"
  10.       :expand-on-click-node="false"
  11.       :indent="22"
  12.     >
  13.       <template #default="{ node, data }">
  14.         <span v-if="!node.isLeaf" style="display: flex; align-items: center;">
  15.           <el-icon v-if="node.expanded" style="margin: 0 6px 0 0px;" size="16"><FolderOpened /></el-icon>
  16.           <el-icon v-else style="margin: 0 6px 0 0px;" size="16"><Folder /></el-icon>
  17.           <small @click="handleNodeClick(node, data)">{{ node.label }}</small>
  18.         </span>
  19.  
  20.         <span v-else style="display: flex; align-items: center;">
  21.           <el-icon style="margin: 0 6px 0 0px;" size="16"><Document /></el-icon>
  22.           <small @click="handleNodeClick(node, data)">{{ node.label }}</small>
  23.         </span>
  24.       </template>
  25.     </el-tree>
  26.   </div>
  27. </template>
  28.  
  29. <script setup>
  30. import { onMounted, ref, getCurrentInstance } from 'vue'
  31.  
  32. // 代理对象
  33. const { proxy } = getCurrentInstance()
  34.  
  35. // 树型数据
  36. const treeData = ref(
  37.   [
  38.     {
  39.       label: '香烟 WiFi 啤酒',
  40.       expanded: true,
  41.       children: [
  42.         {
  43.           label: '香烟',
  44.           children: [
  45.             {
  46.               label: '煊赫门'
  47.             },
  48.             {
  49.               label: 'ESSE双爆珠'
  50.             }
  51.           ],
  52.         },
  53.         {
  54.           label: '后端开发技术',
  55.           children: [
  56.             {
  57.               label: 'Java编程技术'
  58.             },
  59.             {
  60.               label: 'Python编程技术'
  61.             }
  62.           ],
  63.         },
  64.         {
  65.           label: '数据库',
  66.           children: [
  67.             {
  68.               label: '关系型数据库',
  69.               children: [
  70.                 {
  71.                   label: 'MySQL'
  72.                 },
  73.                 {
  74.                   label: 'Oracle'
  75.                 }
  76.               ],
  77.             },
  78.             {
  79.               label: '非关系型数据库',
  80.               children: [
  81.                 {
  82.                   label: 'Redis'
  83.                 },
  84.                 {
  85.                   label: 'Elasticsearch'
  86.                 }
  87.               ],
  88.             }
  89.           ],
  90.         },
  91.         {
  92.           label: 'AI人工智能'
  93.         },
  94.       ],
  95.     },
  96.     {
  97.       label: '火腿 iPad 泡面'
  98.     },
  99.   ]
  100. )
  101.  
  102. // 树节点属性映射关系
  103. const defaultProps = {
  104.   children: 'children',
  105.   label: 'label',
  106. }
  107.  
  108. /**
  109.  * 树组件点击事件句柄方法
  110.  */
  111. const handleNodeClick = (node, data) => {
  112.   console.log(
  113.     '%c 树组件点击事件句柄方法 %c handleNodeClick',
  114.     'padding: 1px; background-color: #35495e; color: #fff',
  115.     'padding: 1px; background-color: #5e7ce0; color: #fff',
  116.   )
  117.   console.log('%c ∟ %c node %c =>', 'text-indent: 10px', 'padding: 1px; background-color: #41b883; color: #fff', 'color: #000', node)
  118.   console.log('%c ∟ %c data %c =>', 'text-indent: 10px', 'padding: 1px; background-color: #41b883; color: #fff', 'color: #000', data)
  119. }
  120.  
  121. onMounted(() => {
  122.   // ...
  123. })
  124. </script>
  125.  
  126. <style lang="less" scoped>
  127.   .element-plus-tree {
  128.     padding: 100px;
  129.  
  130.     :deep(.el-tree) {
  131.  
  132.       /* ---- ---- ---- ---- ^（节点对齐）---- ---- ---- ---- */
  133.       .el-tree-node {
  134.         
  135.         /* ^ 所有节点 */
  136.         i.el-tree-node__expand-icon {
  137.           padding: 6px;
  138.  
  139.           &::before {
  140.             font-family: element-ui-icons;
  141.             font-style: normal;
  142.             content: "\e6d9";
  143.             color: #000000;
  144.             border: 1px solid #606266;
  145.             border-radius: 2px;
  146.           }
  147.  
  148.           svg {
  149.             display: none; // 隐藏所有节点的 svg 图标
  150.           }
  151.         }
  152.         /* / 所有节点 */
  153.  
  154.         /* ^ 已展开的父节点 */
  155.         i.el-tree-node__expand-icon.expanded {
  156.           transform: rotate(0deg); // 取消旋转
  157.           -webkit-transform: rotate(0deg); // 取消旋转
  158.  
  159.           &::before {
  160.             font-family: element-ui-icons;
  161.             font-style: normal;
  162.             content: "\e6d8";
  163.             color: #000000;
  164.             border: 1px solid #606266;
  165.             border-radius: 2px;
  166.           }
  167.         }
  168.         /* / 已展开的父节点 */
  169.  
  170.         /* ^ 叶子节点 */
  171.         i.el-tree-node__expand-icon.is-leaf {
  172.  
  173.           &::before {
  174.             display: none;
  175.           }
  176.         }
  177.         /* / 叶子节点 */
  178.  
  179.         /* ^ 复选框 */
  180.         .el-checkbox {
  181.           margin: 0 7px 0 2px;
  182.  
  183.           .el-checkbox__inner {
  184.             width: 14px;
  185.             height: 14px;
  186.             border-radius: 2px;
  187.             border: 1px solid #bbb;
  188.           }
  189.  
  190.           .el-checkbox__input.is-checked .el-checkbox__inner,
  191.           .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  192.             border: 1px solid #5e7ce0;
  193.           }
  194.         }
  195.         /* / 复选框 */
  196.  
  197.         .el-tree-node__content {
  198.           small {
  199.             font-size: 13px;
  200.           }
  201.         }
  202.       }
  203.       /* ---- ---- ---- ---- /（节点对齐）---- ---- ---- ---- */
  204.  
  205.       /* ---- ---- ---- ---- ^（文字高亮）---- ---- ---- ---- */
  206.       .el-tree-node.is-current {
  207.         .el-tree-node__content {
  208.           small {
  209.             color: #5e7ce0;
  210.           }
  211.         }
  212.  
  213.         .el-tree-node__children {
  214.           small {
  215.             color: unset;
  216.           }
  217.         }
  218.       }
  219.       /* ---- ---- ---- ---- /（文字高亮）---- ---- ---- ---- */
  220.  
  221.       /* ---- ---- ---- ---- ^（新增辅助线）---- ---- ---- ---- */
  222.       /* ^ 树节点 */
  223.       .el-tree-node {
  224.         position: relative;
  225.         width: auto;
  226.         // width: max-content; // 显示文字宽度
  227.         padding-left: 13px;
  228.  
  229.         &::before {
  230.           width: 1px;
  231.           height: 100%;
  232.           content: '';
  233.           position: absolute;
  234.           top: -38px;
  235.           bottom: 0;
  236.           left: 0;
  237.           right: auto;
  238.           border-width: 1px;
  239.           border-left: 1px solid #b8b9bb;
  240.         }
  241.  
  242.         &::after {
  243.           width: 13px;
  244.           height: 13px;
  245.           content: '';
  246.           position: absolute;
  247.           z-index: 0;
  248.           left: 0;
  249.           right: auto;
  250.           top: 12px;
  251.           bottom: auto;
  252.           border-width: 1px;
  253.           border-top: 1px solid #b8b9bb;
  254.         }
  255.  
  256.         .el-tree-node__content {
  257.           position: relative;
  258.           z-index: 1;
  259.           color: #000;
  260.           padding-left: 0 !important;
  261.  
  262.           /* ^ 复选框 */
  263.           .el-checkbox {
  264.             margin: 0 10px 0 5.5px;
  265.           }
  266.           /* / 复选框 */
  267.         }
  268.         
  269.         .el-tree-node__children {
  270.           padding-left: 12px;
  271.         }
  272.  
  273.         &:last-child::before {
  274.           height: 50px;
  275.         }
  276.       }
  277.       /* / 树节点 */
  278.  
  279.       /* ^ 第一层节点 */
  280.       > .el-tree-node {
  281.         padding-left: 0;
  282.  
  283.         &::before {
  284.           border-left: none;
  285.         }
  286.  
  287.         &::after {
  288.           border-top: none;
  289.         }
  290.       }
  291.       /* / 第一层节点 */
  292.  
  293.       /* ^ 叶子节点 */
  294.       i.el-tree-node__expand-icon.is-leaf {
  295.         display: none;
  296.       }
  297.       /* / 叶子节点 */
  298.  
  299.       /* ^ 设置子节点左外边距 */
  300.       .el-tree-node__content:has(.is-leaf) {
  301.         // color: #00ffff;
  302.         margin-left: 25px !important;
  303.       }
  304.       /* / 设置子节点左外边距 */
  305.       /* ---- ---- ---- ---- /（新增辅助线）---- ---- ---- ---- */
  306.     }
  307.   }
  308. </style>

（2）效果如下~

三、基于Vue3+DevUI的附赠例子

1.导入相关依赖

npm i vue-devui -D

2.官方文档

https://vue-devui.github.io/

3.普通示例

（1）示例代码

  1. <template>
  2.   <div class="vue-devui-tree">
  3.  
  4.     <div>
  5.       <span>是否展开所有节点&nbsp;:&nbsp;</span>
  6.        <el-switch
  7.           v-model="isExpandAllNodes"
  8.           size="small"
  9.           @change="handleIsExpandAllNodesChange"
  10.         />
  11.     </div>
  12.  
  13.     <DevTree ref="treeRef" :data="data">
  14.       <template #icon="{ nodeData, toggleNode }">
  15.         <span
  16.           v-if="!nodeData.isLeaf"
  17.           class="devui-tree__node-folder"
  18.           @click="
  19.             (event) => {
  20.               event.stopPropagation();
  21.               toggleNode(nodeData);
  22.             }
  23.           "
  24.         >
  25.           <!-- 未展开图标 -->
  26.           <svg v-if="!nodeData.expanded" style="margin-right: 8px" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
  27.             <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  28.               <rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#666666"></rect>
  29.               <path fill="#666666" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path>
  30.             </g>
  31.           </svg>
  32.  
  33.           <!-- 已展开图标 -->
  34.           <svg v-else style="margin-right: 8px" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
  35.             <g stroke-width="1" fill="none" fill-rule="evenodd">
  36.               <rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#666666"></rect>
  37.               <rect x="4" y="7" width="8" height="2" fill="#666666"></rect>
  38.             </g>
  39.           </svg>
  40.         </span>
  41.  
  42.         <span
  43.           v-else
  44.           class="devui-tree__node-leaf"
  45.         >
  46.         </span>
  47.       </template>
  48.  
  49.       <template #content="{ nodeData }">
  50.         <svg style="margin-right: 7px" viewBox="0 0 16 16" width="16" height="16">
  51.           <path
  52.             :d="`${
  53.               nodeData.isLeaf
  54.                 ? 'M13,6 L9,6 L9,5 L9,2 L3,2 L3,14 L13,14 L13,6 Z M12.5857864,5 L10,2.41421356 L10,5 L12.5857864,5 Z M2,1 L10,1 L14,5 L14,15 L2,15 L2,1 Z'
  55.                 : nodeData.expanded
  56.                 ? 'M16,6 L14,14 L2,14 L0,6 L16,6 Z M14.7192236,7 L1.28077641,7 L2.78077641,13 L13.2192236,13 L14.7192236,7 Z M6,1 L8,3 L15,3 L15,5 L14,5 L14,4 L7.58578644,4 L5.58578644,2 L2,2 L2,5 L1,5 L1,1 L6,1 Z'
  57.                 : 'M14,6 L14,5 L7.58578644,5 L5.58578644,3 L2,3 L2,6 L14,6 Z M14,7 L2,7 L2,13 L14,13 L14,7 Z M1,2 L6,2 L8,4 L15,4 L15,14 L1,14 L1,2 Z'
  58.             }`"
  59.             stroke-width="1"
  60.             fill="#8a8e99"
  61.           ></path>
  62.         </svg>
  63.         <small>{{ nodeData.label }}</small>
  64.       </template>
  65.     </DevTree>
  66.  
  67.   </div>
  68. </template>
  69.  
  70. <script setup>
  71. import { onMounted, ref, getCurrentInstance, toRaw } from 'vue'
  72. import { Tree as DevTree } from "vue-devui"
  73. import 'vue-devui/style.css'
  74.  
  75. // 代理对象
  76. const currentInstance = getCurrentInstance()
  77.  
  78. // 树型DOM引用
  79. const treeRef = ref()
  80.  
  81. // 是否展开所有节点
  82. const isExpandAllNodes = ref(false)
  83.  
  84. // 树型数据
  85. const data = ref(
  86.   [
  87.     {
  88.       label: '香烟 WiFi 啤酒',
  89.       expanded: true,
  90.       children: [
  91.         {
  92.           label: '香烟',
  93.           children: [
  94.             {
  95.               label: '煊赫门'
  96.             },
  97.             {
  98.               label: 'ESSE双爆珠'
  99.             }
  100.           ],
  101.         },
  102.         {
  103.           label: '后端开发技术',
  104.           children: [
  105.             {
  106.               label: 'Java编程技术'
  107.             },
  108.             {
  109.               label: 'Python编程技术'
  110.             }
  111.           ],
  112.         },
  113.         {
  114.           label: '数据库',
  115.           children: [
  116.             {
  117.               label: '关系型数据库',
  118.               children: [
  119.                 {
  120.                   label: 'MySQL'
  121.                 },
  122.                 {
  123.                   label: 'Oracle'
  124.                 }
  125.               ],
  126.             },
  127.             {
  128.               label: '非关系型数据库',
  129.               children: [
  130.                 {
  131.                   label: 'Redis'
  132.                 },
  133.                 {
  134.                   label: 'Elasticsearch'
  135.                 }
  136.               ],
  137.             }
  138.           ],
  139.         },
  140.         {
  141.           label: 'AI人工智能'
  142.         },
  143.       ],
  144.     },
  145.     {
  146.       label: '火腿 iPad 泡面'
  147.     },
  148.   ]
  149. )
  150.  
  151. /**
  152.  * 是否展开所有节点句柄方法
  153.  */
  154. const handleIsExpandAllNodesChange = (val) => {
  155.   if (val) {
  156.     handleExpandAllNodes()
  157.   } else {
  158.     handleCollapseAllNodes()
  159.   }
  160. }
  161.  
  162. /**
  163.  * 将树节点全部展开句柄方法
  164.  */
  165. const handleExpandAllNodes = () => {
  166.   treeRef.value.treeFactory.expandAllNodes()
  167. }
  168.  
  169. /**
  170.  * 将树节点全部收起句柄方法
  171.  */
  172. const handleCollapseAllNodes = () => {
  173.   const treeFactory = treeRef.value.treeFactory
  174.   const treeData = treeFactory.treeData._rawValue
  175.   recursionCollapseNode(treeData)
  176. }
  177.  
  178. /**
  179.  * 递归收起节点句柄方法
  180.  */
  181. const recursionCollapseNode = (treeData) => {
  182.   for (let node of treeData) {
  183.     if (node.expanded) {
  184.       treeRef.value.treeFactory.collapseNode(node)
  185.     }
  186.  
  187.     if (node.children && node.children.length > 0) {
  188.       recursionCollapseNode(node.children)
  189.     }
  190.   }
  191. }
  192.  
  193. onMounted(
  194.   async () => {
  195.     // Todo
  196.   }
  197. )
  198. </script>
  199.  
  200. <style lang="less" scoped>
  201.   .vue-devui-tree {
  202.     padding: 100px;
  203.  
  204.     :deep(.devui-tree) {
  205.  
  206.       .devui-tree__node-leaf {
  207.         // display: none;
  208.         position: relative;
  209.         width: 16px;
  210.         height: 16px;
  211.         margin-right: 6px;
  212.         // background-color: #ccc;
  213.         // border: 1px solid #ccc;
  214.         // border-radius: 2px;
  215.       }
  216.  
  217.       .devui-tree__node-vline {
  218.         margin-left: 4.5px;
  219.         background-color: #cccccc !important;
  220.       }
  221.  
  222.       .devui-tree__node-hline {
  223.         margin-left: 4.5px;
  224.         background-color: #cccccc !important;
  225.       }
  226.  
  227.       .devui-tree__node {
  228.         
  229.         .devui-tree__node-content {
  230.           
  231.           &.active {
  232.             // background-color: unset;
  233.  
  234.             small {
  235.               color: #5e7ce0;
  236.             }
  237.           }
  238.  
  239.           &:hover {
  240.             // background-color: unset;
  241.           }
  242.  
  243.           small {
  244.             font-size: 13px;
  245.             transition: all ease 0.3s;
  246.  
  247.             &:hover {
  248.               color: #5e7ce0;
  249.             }
  250.           }
  251.         }
  252.       }
  253.     }
  254.   }
  255. </style>

（2）效果如下~

4.高级示例

（1）示例代码

  1. <template>
  2.   <div class="vue-devui-tree">
  3.  
  4.     <DevTree ref="treeRef" :data="data" check>
  5.       <template #icon="{ nodeData, toggleNode }">
  6.         <span
  7.           v-if="!nodeData.isLeaf"
  8.           class="devui-tree__node-folder"
  9.           @click="
  10.             (event) => {
  11.               event.stopPropagation();
  12.               toggleNode(nodeData);
  13.             }
  14.           "
  15.         >
  16.           <!-- 未展开图标 -->
  17.           <svg v-if="!nodeData.expanded" style="margin-right: 7px" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
  18.             <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  19.               <rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#666666"></rect>
  20.               <path fill="#666666" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path>
  21.             </g>
  22.           </svg>
  23.  
  24.           <!-- 已展开图标 -->
  25.           <svg v-else style="margin-right: 7px" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
  26.             <g stroke-width="1" fill="none" fill-rule="evenodd">
  27.               <rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#666666"></rect>
  28.               <rect x="4" y="7" width="8" height="2" fill="#666666"></rect>
  29.             </g>
  30.           </svg>
  31.         </span>
  32.  
  33.         <span
  34.           v-else
  35.           class="devui-tree__node-leaf"
  36.         >
  37.         </span>
  38.       </template>
  39.  
  40.       <template #content="{ nodeData }">
  41.         <svg style="margin: 0 7px" viewBox="0 0 16 16" width="16" height="16">
  42.           <path
  43.             :d="`${
  44.               nodeData.isLeaf
  45.                 ? 'M13,6 L9,6 L9,5 L9,2 L3,2 L3,14 L13,14 L13,6 Z M12.5857864,5 L10,2.41421356 L10,5 L12.5857864,5 Z M2,1 L10,1 L14,5 L14,15 L2,15 L2,1 Z'
  46.                 : nodeData.expanded
  47.                 ? 'M16,6 L14,14 L2,14 L0,6 L16,6 Z M14.7192236,7 L1.28077641,7 L2.78077641,13 L13.2192236,13 L14.7192236,7 Z M6,1 L8,3 L15,3 L15,5 L14,5 L14,4 L7.58578644,4 L5.58578644,2 L2,2 L2,5 L1,5 L1,1 L6,1 Z'
  48.                 : 'M14,6 L14,5 L7.58578644,5 L5.58578644,3 L2,3 L2,6 L14,6 Z M14,7 L2,7 L2,13 L14,13 L14,7 Z M1,2 L6,2 L8,4 L15,4 L15,14 L1,14 L1,2 Z'
  49.             }`"
  50.             stroke-width="1"
  51.             fill="#8a8e99"
  52.           ></path>
  53.         </svg>
  54.         <small>{{ nodeData.label }}</small>
  55.       </template>
  56.     </DevTree>
  57.  
  58.   </div>
  59. </template>
  60.  
  61. <script setup lang="ts">
  62. import { onMounted, ref, getCurrentInstance, toRaw, useCssModule, provide } from 'vue'
  63. import { Tree as DevTree } from "vue-devui"
  64. import 'vue-devui/style.css'
  65.  
  66. // 代理对象
  67. const proxy = getCurrentInstance()
  68.  
  69. // 树型DOM引用
  70. const treeRef = ref(null);
  71.  
  72. // 树型数据
  73. const data = ref(
  74.   [
  75.     {
  76.       label: '香烟 WiFi 啤酒',
  77.       expanded: true,
  78.       children: [
  79.         {
  80.           label: '香烟',
  81.           children: [
  82.             {
  83.               label: '煊赫门'
  84.             },
  85.             {
  86.               label: 'ESSE双爆珠'
  87.             }
  88.           ],
  89.         },
  90.         {
  91.           label: '后端开发技术',
  92.           children: [
  93.             {
  94.               label: 'Java编程技术'
  95.             },
  96.             {
  97.               label: 'Python编程技术'
  98.             }
  99.           ],
  100.         },
  101.         {
  102.           label: '数据库',
  103.           children: [
  104.             {
  105.               label: '关系型数据库',
  106.               children: [
  107.                 {
  108.                   label: 'MySQL'
  109.                 },
  110.                 {
  111.                   label: 'Oracle'
  112.                 }
  113.               ],
  114.             },
  115.             {
  116.               label: '非关系型数据库',
  117.               children: [
  118.                 {
  119.                   label: 'Redis'
  120.                 },
  121.                 {
  122.                   label: 'Elasticsearch'
  123.                 }
  124.               ],
  125.             }
  126.           ],
  127.         },
  128.         {
  129.           label: 'AI人工智能'
  130.         },
  131.       ],
  132.     },
  133.     {
  134.       label: '火腿 iPad 泡面'
  135.     },
  136.   ]
  137. )
  138.  
  139. onMounted(() => {
  140.   // 展开全部节点
  141.   if (treeRef && treeRef.value) {
  142.     const treeFactory: any = treeRef.value['treeFactory']
  143.     treeFactory.expandAllNodes()
  144.   }
  145. })
  146. </script>
  147.  
  148. <style lang="less" scoped>
  149.   .vue-devui-tree {
  150.     padding: 100px;
  151.  
  152.     :deep(.devui-tree) {
  153.  
  154.       .devui-tree__node-leaf {
  155.         // display: none;
  156.         position: relative;
  157.         width: 16px;
  158.         height: 16px;
  159.         margin-right: 6px;
  160.         // background-color: #ccc;
  161.         // border: 1px solid #ccc;
  162.         // border-radius: 2px;
  163.       }
  164.  
  165.       .devui-tree__node-vline {
  166.         margin-left: 4.5px;
  167.         background-color: #cccccc !important;
  168.       }
  169.  
  170.       .devui-tree__node-hline {
  171.         margin-left: 4.5px;
  172.         background-color: #cccccc !important;
  173.       }
  174.  
  175.       .devui-tree__node {
  176.         
  177.         .devui-tree__node-content {
  178.           
  179.           &.active {
  180.             // background-color: unset;
  181.  
  182.             small {
  183.               color: #5e7ce0;
  184.             }
  185.           }
  186.  
  187.           // &:hover {
  188.             // background-color: unset;
  189.           // }
  190.  
  191.           small {
  192.             font-size: 13px;
  193.             transition: all ease 0.3s;
  194.  
  195.             &:hover {
  196.               color: #5e7ce0;
  197.             }
  198.           }
  199.         }
  200.       }
  201.     }
  202.   }
  203. </style>

（2）效果如下~

四、参考资料

vue树形控件tree的使用方法_vue.js_脚本之家

Vue DevUI

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/283678
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号