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

vue中使用elementui实现对树组件tree右键增删改功能_element tree 右键功能

作者：羊村懒王 | 2024-02-20 08:10:22

赞

踩

element tree 右键功能

功能描述：

1、自定义树节点前展开收起图标

2、可对节点数据进行模糊查询

3、右击第一级节点可以进行同级节点增加

4、双击节点或点击修改节点 都可以对节点获取焦点并进行修改，回车修改成功

5、可对节点进行拖拽，实现节点移动功能 

6、右击节点可进行增删改

 效果图：

 html布局：

 html代码

  1.  <div class="tree-container">
  2.         <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="search">
  3.         </el-input>
  4.         <el-tree :data="treeData" node-key="id" default-expand-all @node-click="handleLeftclick"
  5.             @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave"
  6.             @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop"
  7.             @node-contextmenu="rightClick" :filter-node-method="filterNode" draggable :allow-drop="allowDrop"
  8.             :allow-drag="allowDrag" ref="tree" class="tree-line">
  9.             <span class="slot-t-node" slot-scope="{ node, data }" @dblclick="editNode(data)">
  10.                 <span v-show="!data.isEdit">
  11.                     <span :class="[data.id >= 99 ? 'slot-t-node--label' : '']">
  12.                         <i v-if="data.type == 'catalog'" class="el-icon-folder" />
  13.                         <i v-if="data.type == 'menu'" class="el-icon-tickets" />
  14.                         <i v-if="data.type == 'submenu'" class="el-icon-document" />
  15.                         <span> {{ node.label }}</span>
  16.                     </span>
  17.                 </span>
  18.                 <span v-show="data.isEdit">
  19.                     <el-input class="slot-t-input" size="mini" autofocus v-model="data.label" :ref="'slotTreeInput' + data.id"
  20.                         @blur.stop="NodeBlur(node, data)" @keydown.native.enter="NodeBlur(node, data)"></el-input>
  21.                 </span>
  22.             </span>
  23.         </el-tree>
  24.         <div class="box-menu" v-show="menuVisible" :style="{ left: menu_left + 'px', top: menu_top + 'px' }">
  25.             <div @click="addSameLevelNode(0)" v-show="firstLevel">
  26.                 <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;同级增加
  27.             </div>
  28.             <div class="add" @click="addChildNode()">
  29.                 <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;子级增加
  30.             </div>
  31.             <div class="delete" @click="deleteNode()">
  32.                 <i class="el-icon-remove-outline"></i>&nbsp;&nbsp;删除节点
  33.             </div>
  34.             <div class="edit" @click="editNode()">
  35.                 <i class="el-icon-edit"></i>&nbsp;&nbsp;修改节点
  36.             </div>
  37.         </div>
  38.     </div>

CSS样式

  1. <style scoped lang="less">
  2. .el-tree>.is-leaf {
  3.     color: transparent;
  4. }
  5. .tree-container /deep/ .el-tree-node__expand-icon.expanded {
  6.     -webkit-transform: rotate(0deg);
  7.     transform: rotate(0deg);
  8. }
  9. .tree-container /deep/ .el-tree-node__expand-icon.expanded {
  10.     -webkit-transform: rotate(0deg);
  11.     transform: rotate(0deg);
  12. }
  13. .tree-container /deep/ .el-icon-caret-right:before {
  14.     background: url("../../assets/node-collapse.png") no-repeat;
  15.     content: '';
  16.     display: block;
  17.     width: 12px;
  18.     height: 12px;
  19.     font-size: 12px;
  20.     background-size: 10px;
  21. }
  22. /*
  23.   //有子节点 且已展开*/
  24. .tree-container /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  25.     background: url("../../assets/node-expand.png") no-repeat;
  26.     content: '';
  27.     display: block;
  28.     width: 12px;
  29.     height: 12px;
  30.     font-size: 12px;
  31.     background-size: 10px;
  32. }
  33.  
  34. /*  //没有子节点*/
  35. .tree-container /deep/ .el-tree-node__expand-icon.is-leaf::before {
  36.     background: transparent no-repeat 0 3px;
  37.     content: '';
  38.     display: block;
  39.     width: 12px;
  40.     height: 12px;
  41.     font-size: 12px;
  42.     background-size: 10px;
  43. }
  44. /* 点击节点时的选中颜色 */
  45. .tree-container /deep/.el-tree-node.is-current>.el-tree-node__content {
  46.     color: #3D5ECC !important;
  47. }
  48. .tree-container /deep/ .el-tree-node__expand-icon {
  49.     margin-left: 15px;
  50.     // padding: 0px;
  51. }
  52. .tree-container /deep/ .el-tree-node__expand-icon.is-leaf {
  53.     margin-left: 0px;
  54. }
  55. .tree-container /deep/ .el-tree-node {
  56.     position: relative;
  57.     padding-left: 16px;
  58. }
  59. .tree-container /deep/ .el-tree-node__children {
  60.     padding-left: 16px;
  61. }
  62. .tree-container /deep/ .el-tree>.el-tree-node:before {
  63.     border-left: none;
  64. }
  65. .tree-container /deep/ .el-tree>.el-tree-node:after {
  66.     border-top: none;
  67. }
  68. .tree-container /deep/ .el-tree>.el-tree-node:before {
  69.     border-left: none;
  70. }
  71. .tree-container /deep/ .el-tree>.el-tree-node:after {
  72.     border-top: none;
  73. }
  74. .tree-container /deep/ .el-tree-node:before {
  75.     content: "";
  76.     left: 10px;
  77.     position: absolute;
  78.     right: auto;
  79.     border-width: 1px;
  80. }
  81. .tree-container /deep/ .el-tree-node:after {
  82.     content: "";
  83.     left: 10px;
  84.     position: absolute;
  85.     right: auto;
  86.     border-width: 1px;
  87. }
  88. .tree-container /deep/ .el-tree-node:before {
  89.     border-left: 1px dashed #ccc;
  90.     bottom: 0px;
  91.     height: 100%;
  92.     top: -19px;
  93.     width: 1px;
  94. }
  95. .tree-container /deep/ .el-tree-node:after {
  96.     border-top: 1px dashed #ccc;
  97.     height: 25px;
  98.     top: 20px;
  99.     width: 20px;
  100. }
  101. .el-tree-node :last-child:before {
  102.     height: 40px;
  103. }
  104. .tree-container {
  105.     margin: 10px;
  106. }
  107. .tree-container /deep/ .el-tree .el-tree-node {
  108.     position: relative;
  109. }
  110. .tree-container /deep/ .el-tree-node .el-tree-node__content {
  111.     height: 34px;
  112.     padding-left: 0px !important;
  113.     border: none;
  114. }
  115. .tree-container /deep/ .el-tree-node .el-tree-node__content::before {
  116.     border-left: 1px dashed #ccc;
  117.     height: 100%;
  118.     top: 0;
  119.     width: 1px;
  120.     margin-left: 1px;
  121.     margin-top: 0px;
  122.     z-index: 8;
  123. }
  124. .tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::before {
  125.     border-left: 0px dashed #ccc;
  126.     height: 100%;
  127.     top: 0;
  128.     width: 1px;
  129.     margin-left: 1px;
  130.     margin-top: 0px;
  131.     z-index: 8;
  132. }
  133. .tree-container /deep/ .el-tree-node .el-tree-node__content::after {
  134.     border-top: 1px dashed #ccc;
  135.     height: 1px;
  136.     top: 18px;
  137.     width: 13px;
  138.     margin-left: 1px;
  139.     z-index: 8;
  140. }
  141. .tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::after {
  142.     border-top: 0px dashed #ccc;
  143. }
  144. .tree-container .el-tree-node .el-tree-node__content::before,
  145. .tree-container .el-tree-node .el-tree-node__content::after {
  146.     content: "";
  147.     position: absolute;
  148.     right: auto;
  149. }
  150.  
  151. .el-tree {
  152.     width: 20%;
  153.     margin-top: 10px;
  154. }
  155.  
  156. .search {
  157.     width: 20%;
  158.     cursor: pointer;
  159. }
  160. .box-menu {
  161.     width: 150px;
  162.     position: absolute;
  163.     z-index: 1000;
  164.     background-color: #fff;
  165.     box-shadow: 0px 0px 10px #ccc, 0px 0px 20px #ccc, 0px 0px 30px #ccc;
  166.     padding: 10px;
  167.  
  168.     div {
  169.         cursor: pointer;
  170.         line-height: 30px;
  171.     }
  172.  
  173.     div:active {
  174.         color: blue;
  175.     }
  176. }
  177. </style>

输入框校验

  1.  NodeBlur(Node, data) {
  2.             console.log(Node, data)
  3.             if (data.label.length === 0) {
  4.                 this.$message.error('菜单名不可为空！')
  5.                 return false
  6.             } else {
  7.                 if (data.isEdit) {
  8.                     this.$set(data, 'isEdit', false)
  9.                     console.log(data.isEdit)
  10.                 }
  11.                 this.$nextTick(() => {
  12.                     this.$refs['slotTreeInput' + data.id].$refs.input.focus()
  13.                 })
  14.             }
  15.         },

查询功能

  1. // 查询
  2.         filterNode(value, data) {
  3.             if (!value) return true
  4.             return data.label.indexOf(value) !== -1
  5.         },
  6.  
  7.  
  8.  
  9.   watch: {
  10.         filterText(val) {
  11.             this.$refs.tree.filter(val)
  12.         }
  13.     },

拖拽功能

  1. allowDrop(draggingNode, dropNode, type) {
  2.             if (dropNode.data.label === '二级 3-1') {
  3.                 return type !== 'inner'
  4.             } else {
  5.                 return true
  6.             }
  7.         },
  8.         allowDrag(draggingNode) {
  9.             return draggingNode.data.label.indexOf('三级 3-2-2') === -1
  10.         },
  11.  
  12.  
  13.  handleDragStart(node, ev) {
  14.             console.log('drag start', node)
  15.         },
  16.         handleDragEnter(draggingNode, dropNode, ev) {
  17.             console.log('tree drag enter: ', dropNode.label)
  18.         },
  19.         handleDragLeave(draggingNode, dropNode, ev) {
  20.             console.log('tree drag leave: ', dropNode.label)
  21.         },
  22.         handleDragOver(draggingNode, dropNode, ev) {
  23.             console.log('tree drag over: ', dropNode.label)
  24.         },
  25.         handleDragEnd(draggingNode, dropNode, dropType, ev) {
  26.             console.log('tree drag end: ', dropNode && dropNode.label, dropType)
  27.         },
  28.         handleDrop(draggingNode, dropNode, dropType, ev) {
  29.             console.log('tree drop: ', dropNode.label, dropType)
  30.         },

鼠标事件

  1.  // 鼠标右击事件
  2.         rightClick(event, object, Node, element) {
  3.             console.log(event, object)
  4.             this.currentData = object
  5.             this.currentNode = Node
  6.             if (Node.level === 1) {
  7.                 this.firstLevel = true
  8.             } else {
  9.                 this.firstLevel = false
  10.             }
  11.             this.menuVisible = true
  12.             document.addEventListener('click', this.foo)
  13.            // 将菜单显示在鼠标点击旁边定位
  14.             this.menu_left = event.clientX -140;
  15.             this.menu_top = event.clientY - 40; 
  16.    
  17.         },
  18.         // 鼠标左击事件
  19.         handleLeftclick(data, node) {
  20.             this.foo()
  21.         },
  22.         //  取消鼠标监听事件 菜单栏
  23.         foo() {
  24.             this.menuVisible = false
  25.             //  要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
  26.             document.removeEventListener('click', this.foo)
  27.         },

 增加同级节点事件

  1.   // 增加同级节点事件
  2.         addSameLevelNode() {
  3.             let id = Math.ceil(Math.random() * 100)
  4.             var data = { id: id, label: '新增节点' }
  5.             this.$refs.tree.append(data, this.currentNode.parent)
  6.         },

增加子级节点事件 

  1.  // 增加子级节点事件
  2.         addChildNode() {
  3.             console.log(this.currentData)
  4.             console.log(this.currentNode)
  5.             if (this.currentNode.level >= 3) {
  6.                 this.$message.error('最多只支持三级！')
  7.                 return false
  8.             }
  9.             let id = Math.ceil(Math.random() * 100)
  10.             var data = { id: id, label: '新增节点' }
  11.             this.$refs.tree.append(data, this.currentNode)
  12.         },

删除节点

  1.  // 删除节点
  2.         deleteNode() {
  3.             this.$refs.tree.remove(this.currentNode)
  4.         },

编辑节点

  1.  // 编辑节点
  2.         editNode(data) {
  3.             console.log(data)
  4.             this.currentData = data ? data : this.currentData
  5.             if (!this.currentData.isEdit) {
  6.                 this.$set(this.currentData, 'isEdit', true)
  7.             }
  8.             // 获取焦点
  9.             this.$nextTick(() => {
  10.                 this.$refs['slotTreeInput' + this.currentData.id].focus()
  11.             })
  12.         },

整体代码

  1. <template>
  2.     <div class="tree-container">
  3.         <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="search">
  4.         </el-input>
  5.         <el-tree :data="treeData" node-key="id" default-expand-all @node-click="handleLeftclick"
  6.             @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave"
  7.             @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop"
  8.             @node-contextmenu="rightClick" :filter-node-method="filterNode" draggable :allow-drop="allowDrop"
  9.             :allow-drag="allowDrag" ref="tree" class="tree-line">
  10.             <span class="slot-t-node" slot-scope="{ node, data }" @dblclick="editNode(data)">
  11.                 <span v-show="!data.isEdit">
  12.                     <span :class="[data.id >= 99 ? 'slot-t-node--label' : '']">
  13.                         <i v-if="data.type == 'catalog'" class="el-icon-folder" />
  14.                         <i v-if="data.type == 'menu'" class="el-icon-tickets" />
  15.                         <i v-if="data.type == 'submenu'" class="el-icon-document" />
  16.                         <span> {{ node.label }}</span>
  17.                     </span>
  18.                 </span>
  19.                 <span v-show="data.isEdit">
  20.                     <el-input class="slot-t-input" size="mini" autofocus v-model="data.label" :ref="'slotTreeInput' + data.id"
  21.                         @blur.stop="NodeBlur(node, data)" @keydown.native.enter="NodeBlur(node, data)"></el-input>
  22.                 </span>
  23.             </span>
  24.         </el-tree>
  25.         <!-- <el-card class="box-card" ref="card" v-show="menuVisible">
  26.                     <div @click="addSameLevelNode()" v-show="firstLevel">
  27.                             <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;同级增加
  28.                         </div>
  29.                     <div class="add" @click="addChildNode()">
  30.                             <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;子级增加
  31.                         </div>
  32.                     <div class="delete" @click="deleteNode()">
  33.                             <i class="el-icon-remove-outline"></i>&nbsp;&nbsp;删除节点
  34.                         </div>
  35.                     <div class="edit" @click="editNode()">
  36.                             <i class="el-icon-edit"></i>&nbsp;&nbsp;修改节点
  37.                         </div>
  38.                 </el-card> -->
  39.         <div class="box-menu" v-show="menuVisible" :style="{ left: menu_left + 'px', top: menu_top + 'px' }">
  40.             <div @click="addSameLevelNode(0)" v-show="firstLevel">
  41.                 <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;同级增加
  42.             </div>
  43.             <div class="add" @click="addChildNode()">
  44.                 <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;子级增加
  45.             </div>
  46.             <div class="delete" @click="deleteNode()">
  47.                 <i class="el-icon-remove-outline"></i>&nbsp;&nbsp;删除节点
  48.             </div>
  49.             <div class="edit" @click="editNode()">
  50.                 <i class="el-icon-edit"></i>&nbsp;&nbsp;修改节点
  51.             </div>
  52.         </div>
  53.     </div>
  54. </template>
  55.  
  56. <script>
  57. export default {
  58.     name: 'tree',
  59.     data() {
  60.         return {
  61.             eleId: '',
  62.             isShow: false,
  63.             currentData: '',
  64.             currentNode: '',
  65.             menuVisible: false,
  66.             firstLevel: false,
  67.             filterText: '',
  68.             maxexpandId: 4,
  69.             menu_left: 0,
  70.             menu_top: 0,
  71.             treeData: [{
  72.                 id: 1,
  73.                 label: '一级 1',
  74.                 isEdit: false,
  75.                 type: 'catalog',
  76.                 children: [{
  77.                     id: 4,
  78.                     label: '二级 1-1',
  79.                     isEdit: false,
  80.                     type: 'menu',
  81.                     children: [{
  82.                         id: 9,
  83.                         label: '三级 1-1-1',
  84.                         isEdit: false,
  85.                         type: 'submenu',
  86.                     }, {
  87.                         id: 10,
  88.                         label: '三级 1-1-2',
  89.                         isEdit: false,
  90.                         type: 'submenu',
  91.                     }]
  92.                 }]
  93.             }, {
  94.                 id: 2,
  95.                 label: '一级 2',
  96.                 isEdit: false,
  97.                 type: 'catalog',
  98.                 children: [{
  99.                     id: 5,
  100.                     label: '二级 2-1',
  101.                     isEdit: false,
  102.                     type: 'menu',
  103.                 }, {
  104.                     id: 6,
  105.                     label: '二级 2-2',
  106.                     isEdit: false,
  107.                     type: 'menu',
  108.                 }]
  109.             }, {
  110.                 id: 3,
  111.                 label: '一级 3',
  112.                 isEdit: false,
  113.                 type: 'catalog',
  114.                 children: [{
  115.                     id: 7,
  116.                     label: '二级 3-1',
  117.                     isEdit: false,
  118.                     type: 'menu',
  119.                 }, {
  120.                     id: 8,
  121.                     label: '二级 3-2',
  122.                     isEdit: false,
  123.                     type: 'menu',
  124.                     children: [{
  125.                         id: 11,
  126.                         label: '三级 3-2-1',
  127.                         isEdit: false,
  128.                         type: 'submenu',
  129.                     }, {
  130.                         id: 12,
  131.                         label: '三级 3-2-2',
  132.                         isEdit: false,
  133.                         type: 'submenu',
  134.                     }, {
  135.                         id: 13,
  136.                         label: '三级 3-2-3',
  137.                         isEdit: false,
  138.                         type: 'submenu',
  139.                     }]
  140.                 }]
  141.             }],
  142.             defaultProps: {
  143.                 children: 'children',
  144.                 label: 'label'
  145.             }
  146.         }
  147.     },
  148.     methods: {
  149.         NodeBlur(Node, data) {
  150.             console.log(Node, data)
  151.             if (data.label.length === 0) {
  152.                 this.$message.error('菜单名不可为空！')
  153.                 return false
  154.             } else {
  155.                 if (data.isEdit) {
  156.                     this.$set(data, 'isEdit', false)
  157.                     console.log(data.isEdit)
  158.                 }
  159.                 this.$nextTick(() => {
  160.                     this.$refs['slotTreeInput' + data.id].$refs.input.focus()
  161.                 })
  162.             }
  163.         },
  164.         // 查询
  165.         filterNode(value, data) {
  166.             if (!value) return true
  167.             return data.label.indexOf(value) !== -1
  168.         },
  169.  
  170.         allowDrop(draggingNode, dropNode, type) {
  171.             if (dropNode.data.label === '二级 3-1') {
  172.                 return type !== 'inner'
  173.             } else {
  174.                 return true
  175.             }
  176.         },
  177.         allowDrag(draggingNode) {
  178.             return draggingNode.data.label.indexOf('三级 3-2-2') === -1
  179.         },
  180.         // 鼠标右击事件
  181.         rightClick(event, object, Node, element) {
  182.             console.log(event, object)
  183.             this.currentData = object
  184.             this.currentNode = Node
  185.             if (Node.level === 1) {
  186.                 this.firstLevel = true
  187.             } else {
  188.                 this.firstLevel = false
  189.             }
  190.             this.menuVisible = true
  191.             document.addEventListener('click', this.foo)
  192.            // 将菜单显示在鼠标点击旁边定位
  193.             this.menu_left = event.clientX -140;
  194.             this.menu_top = event.clientY - 40; 
  195.    
  196.         },
  197.         // 鼠标左击事件
  198.         handleLeftclick(data, node) {
  199.             this.foo()
  200.         },
  201.         //  取消鼠标监听事件 菜单栏
  202.         foo() {
  203.             this.menuVisible = false
  204.             //  要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
  205.             document.removeEventListener('click', this.foo)
  206.         },
  207.         // 增加同级节点事件
  208.         addSameLevelNode() {
  209.             let id = Math.ceil(Math.random() * 100)
  210.             var data = { id: id, label: '新增节点' }
  211.             this.$refs.tree.append(data, this.currentNode.parent)
  212.         },
  213.         // 增加子级节点事件
  214.         addChildNode() {
  215.             console.log(this.currentData)
  216.             console.log(this.currentNode)
  217.             if (this.currentNode.level >= 3) {
  218.                 this.$message.error('最多只支持三级！')
  219.                 return false
  220.             }
  221.             let id = Math.ceil(Math.random() * 100)
  222.             var data = { id: id, label: '新增节点' }
  223.             this.$refs.tree.append(data, this.currentNode)
  224.         },
  225.         // 删除节点
  226.         deleteNode() {
  227.             this.$refs.tree.remove(this.currentNode)
  228.         },
  229.         // 编辑节点
  230.         editNode(data) {
  231.             console.log(data)
  232.             this.currentData = data ? data : this.currentData
  233.             if (!this.currentData.isEdit) {
  234.                 this.$set(this.currentData, 'isEdit', true)
  235.             }
  236.             // 获取焦点
  237.             this.$nextTick(() => {
  238.                 this.$refs['slotTreeInput' + this.currentData.id].focus()
  239.             })
  240.         },
  241.         handleDragStart(node, ev) {
  242.             console.log('drag start', node)
  243.         },
  244.         handleDragEnter(draggingNode, dropNode, ev) {
  245.             console.log('tree drag enter: ', dropNode.label)
  246.         },
  247.         handleDragLeave(draggingNode, dropNode, ev) {
  248.             console.log('tree drag leave: ', dropNode.label)
  249.         },
  250.         handleDragOver(draggingNode, dropNode, ev) {
  251.             console.log('tree drag over: ', dropNode.label)
  252.         },
  253.         handleDragEnd(draggingNode, dropNode, dropType, ev) {
  254.             console.log('tree drag end: ', dropNode && dropNode.label, dropType)
  255.         },
  256.         handleDrop(draggingNode, dropNode, dropType, ev) {
  257.             console.log('tree drop: ', dropNode.label, dropType)
  258.         },
  259.     },
  260.     watch: {
  261.         filterText(val) {
  262.             this.$refs.tree.filter(val)
  263.         }
  264.     },
  265.     mounted() {
  266.     }
  267. }
  268. </script>
  269. <style scoped lang="less">
  270. .el-tree>.is-leaf {
  271.     color: transparent;
  272. }
  273.  
  274. .tree-container /deep/ .el-tree-node__expand-icon.expanded {
  275.     -webkit-transform: rotate(0deg);
  276.     transform: rotate(0deg);
  277. }
  278.  
  279. .tree-container /deep/ .el-tree-node__expand-icon.expanded {
  280.     -webkit-transform: rotate(0deg);
  281.     transform: rotate(0deg);
  282. }
  283.  
  284.  
  285. .tree-container /deep/ .el-icon-caret-right:before {
  286.     background: url("../../assets/node-collapse.png") no-repeat;
  287.     content: '';
  288.     display: block;
  289.     width: 12px;
  290.     height: 12px;
  291.     font-size: 12px;
  292.     background-size: 10px;
  293. }
  294.  
  295. /*
  296.   //有子节点 且已展开*/
  297. .tree-container /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  298.     background: url("../../assets/node-expand.png") no-repeat;
  299.     content: '';
  300.     display: block;
  301.     width: 12px;
  302.     height: 12px;
  303.     font-size: 12px;
  304.     background-size: 10px;
  305. }
  306.  
  307. /*  //没有子节点*/
  308. .tree-container /deep/ .el-tree-node__expand-icon.is-leaf::before {
  309.     background: transparent no-repeat 0 3px;
  310.     content: '';
  311.     display: block;
  312.     width: 12px;
  313.     height: 12px;
  314.     font-size: 12px;
  315.     background-size: 10px;
  316. }
  317.  
  318. /* 点击节点时的选中颜色 */
  319. .tree-container /deep/.el-tree-node.is-current>.el-tree-node__content {
  320.     color: #3D5ECC !important;
  321. }
  322.  
  323. .tree-container /deep/ .el-tree-node__expand-icon {
  324.     margin-left: 15px;
  325. }
  326.  
  327. .tree-container /deep/ .el-tree-node__expand-icon.is-leaf {
  328.     margin-left: 0px;
  329. }
  330.  
  331. .tree-container /deep/ .el-tree-node {
  332.     position: relative;
  333.     padding-left: 16px;
  334. }
  335.  
  336. .tree-container /deep/ .el-tree-node__children {
  337.     padding-left: 16px;
  338. }
  339.  
  340. .tree-container /deep/ .el-tree>.el-tree-node:before {
  341.     border-left: none;
  342. }
  343.  
  344. .tree-container /deep/ .el-tree>.el-tree-node:after {
  345.     border-top: none;
  346. }
  347.  
  348. .tree-container /deep/ .el-tree>.el-tree-node:before {
  349.     border-left: none;
  350. }
  351.  
  352. .tree-container /deep/ .el-tree>.el-tree-node:after {
  353.     border-top: none;
  354. }
  355.  
  356. .tree-container /deep/ .el-tree-node:before {
  357.     content: "";
  358.     left: 10px;
  359.     position: absolute;
  360.     right: auto;
  361.     border-width: 1px;
  362. }
  363.  
  364. .tree-container /deep/ .el-tree-node:after {
  365.     content: "";
  366.     left: 10px;
  367.     position: absolute;
  368.     right: auto;
  369.     border-width: 1px;
  370. }
  371.  
  372. .tree-container /deep/ .el-tree-node:before {
  373.     border-left: 1px dashed #ccc;
  374.     bottom: 0px;
  375.     height: 100%;
  376.     top: -19px;
  377.     width: 1px;
  378. }
  379.  
  380. .tree-container /deep/ .el-tree-node:after {
  381.     border-top: 1px dashed #ccc;
  382.     height: 25px;
  383.     top: 20px;
  384.     width: 20px;
  385. }
  386.  
  387. .el-tree-node :last-child:before {
  388.     height: 40px;
  389. }
  390.  
  391. .tree-container {
  392.     margin: 10px;
  393. }
  394.  
  395. .tree-container /deep/ .el-tree .el-tree-node {
  396.     position: relative;
  397. }
  398.  
  399. .tree-container /deep/ .el-tree-node .el-tree-node__content {
  400.     height: 34px;
  401.     padding-left: 0px !important;
  402.     border: none;
  403. }
  404.  
  405. .tree-container /deep/ .el-tree-node .el-tree-node__content::before {
  406.     border-left: 1px dashed #ccc;
  407.     height: 100%;
  408.     top: 0;
  409.     width: 1px;
  410.     margin-left: 1px;
  411.     margin-top: 0px;
  412.     z-index: 8;
  413. }
  414.  
  415. .tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::before {
  416.     border-left: 0px dashed #ccc;
  417.     height: 100%;
  418.     top: 0;
  419.     width: 1px;
  420.     margin-left: 1px;
  421.     margin-top: 0px;
  422.     z-index: 8;
  423. }
  424.  
  425. .tree-container /deep/ .el-tree-node .el-tree-node__content::after {
  426.     border-top: 1px dashed #ccc;
  427.     height: 1px;
  428.     top: 18px;
  429.     width: 13px;
  430.     margin-left: 1px;
  431.     z-index: 8;
  432. }
  433.  
  434. .tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::after {
  435.     border-top: 0px dashed #ccc;
  436. }
  437.  
  438. .tree-container .el-tree-node .el-tree-node__content::before,
  439. .tree-container .el-tree-node .el-tree-node__content::after {
  440.     content: "";
  441.     position: absolute;
  442.     right: auto;
  443. }
  444.  
  445. .el-tree {
  446.     width: 20%;
  447.     margin-top: 10px;
  448. }
  449.  
  450. .search {
  451.     width: 20%;
  452. }
  453.  
  454. .item {
  455.     padding: 18px 0;
  456. }
  457.  
  458. .search {
  459.     cursor: pointer;
  460. }
  461.  
  462. .box-menu {
  463.     width: 150px;
  464.     position: absolute;
  465.     z-index: 1000;
  466.     background-color: #fff;
  467.     box-shadow: 0px 0px 10px #ccc, 0px 0px 20px #ccc, 0px 0px 30px #ccc;
  468.     padding: 10px;
  469.  
  470.     div {
  471.         cursor: pointer;
  472.         line-height: 30px;
  473.     }
  474.  
  475.     div:active {
  476.         color: blue;
  477.     }
  478. }
  479. </style>

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

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

  

闽ICP备14008679号