commit

src/components/roleTree/index.vue

@@ -5,7 +5,7 @@
                 :visible.sync="isVisible2"
                 :wrapperClosable="false"
                 @close="handleTreeDrawerCancel"
-                size="800px">
+                size="400px">
             <el-form
                     ref="attributeEO"
                     class="label-input-form"
@@ -22,7 +22,8 @@
                     v-if="open1 && isVisible2"
                     node-key="id"
                     style="height: 100%; overflow: auto;"
-                    class="filter-tree"
+                    class="filter-tree tree-line"
+                    :class="treeClass"
                     :data="treeData"
                     :props="defaultProps"
                     :default-checked-keys="nodeList"
@@ -34,12 +35,16 @@
                     ref="tree"
                     :load="loadNode"
                     lazy>
+                  <span class="custom-tree-node" slot-scope="{ node, data }">
+                      <span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
+                      <span> {{ node.label }} </span>
+                  </span>
             </el-tree>
             <el-tree
                     v-if="!open1 && isVisible2"
                     node-key="id"
                     style="height: 100%; overflow: auto;"
-                    class="filter-tree"
+                    class="filter-tree tree-line"
                     :data="treeData1"
                     :props="defaultProps"
                     :default-checked-keys="nodeList"
@@ -50,6 +55,10 @@
                     default-expand-all
                     show-checkbox
                     ref="tree">
+                  <span class="custom-tree-node" slot-scope="{ node, data }">
+                      <span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
+                      <span> {{ node.label }} </span>
+                  </span>
             </el-tree>
             <div id="roleFormButton" class="demo-drawer-footer">
                 <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveUserInfo">确定</el-button>
@@ -89,7 +98,12 @@
                 filterText: '',
                 defaultProps: {
                     children: 'children',
-                    label: 'name'
+                    label: 'name',
+                    isLeaf: (data, node) => {
+                        if (!node.disabled) {
+                            return true
+                        }
+                    }
                 },
                 treeData1: [],
                 treeData: [],
@@ -99,6 +113,9 @@
             }
         },
         methods: {
+            treeClass () {
+
+            },
             handleTreeDrawerCancel () {
                 this.filterText = ''
                 this.isVisible2 = false
@@ -171,5 +188,80 @@
     }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+    /deep/.el-tree-node__content {
+        padding-left: 0px !important;
+    }
+    /deep/ .is-leaf{
+        background-image:none;
+        background-size:100% 100%;
+    }
+    /deep/ .is-leaf-none{
+        position: relative;
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background:url('~@/assets/images/shangqi/img/personnel.png');
+        background-size:100% 100%;
+    }
+    /deep/ .is-show{
+        position: relative;
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background:url('~@/assets/images/shangqi/img/mechanism.png');
+        background-size:100% 100%;
+    }
+    /deep/.tree-line{
+        .el-tree-node {
+            position: relative;
+            padding-left: 0px; // 缩进量
+            line-height: 30px;
+        }
+        .el-tree-node__children {
+            padding-left: 16px; // 缩进量
+        }
+        // 竖线
+        .el-tree-node::before {
+            content: "";
+            height: 100%;
+            width: 1px;
+            position: absolute;
+            left: -3px;
+            top: -26px;
+            border-width: 1px;
+            border-left: 1px dashed #858990e0;
+        }
+        // 当前层最后一个节点的竖线高度固定
+        .el-tree-node:last-child::before {
+            height: 38px; // 可以自己调节到合适数值
+        }
+        // 横线
+        .el-tree-node::after {
+            content: "";
+            width: 11px;
+            height: 20px;
+            position: absolute;
+            left: -3px;
+            top: 12px;
+            border-width: 1px;
+            border-top: 1px dashed #858990e0;
+        }
+        // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
+        & > .el-tree-node::after {
+            border-top: none;
+        }
+        & > .el-tree-node::before {
+            border-left: none;
+        }
+        // 展开关闭的icon
+        .el-tree-node__expand-icon{
+            font-size: 16px;
+            // 叶子节点（无子节点）
+            &.is-leaf{
+                color: transparent;
+                // display: none; // 也可以去掉
+            }
+        }
+    }
 </style>