• el-tree,很恶心的树,就从默认展开节点开始吧


    贴入树的load代码,添加ul是为了鼠标右击展示操作选项的

    <div class="block device-tree">
                <div v-show="showOpertions">
                  <ul
                    id="menu"
                    class="right-menu"
                  >
                    <li
                      class="el-icon-plus menu-item"
                      @click="() => add(this.nodes, this.datas)"
                    >
                      新增
                    </li>
                    <li
                      class="el-icon-edit menu-item"
                      @click="() => edit(this.nodes, this.datas)"
                    >
                      编辑
                    </li>
                    <li
                      class="el-icon-minus menu-item"
                      @click="() => remove(this.nodes, this.datas)"
                    >
                      删除
                    </li>
                  </ul>
                </div>
                <el-input
                  v-model="filterText"
                  class="hbaseInputClass"
                  placeholder="输入关键字进行过滤"
                >
                </el-input>
                <el-tree
                  v-if="openPanel"
                  ref="tree"
                  class="filter-tree"
                  :props="defaultProps"
                  node-key="path"
                  :default-expanded-keys="treeExpandData"
                  :load="loadData"
                  lazy
                  :data="data"
                  :filter-node-method="filterNode"
                  @node-contextmenu="rightClick"
                  @node-click="handleNodeClick"
                >
                  <span slot-scope="{ node, data}" class="custom-tree-node">
                    <!--                不同节点类型展示logo不同-->
                    <span v-if="data.flag === 'namespace'" class="el-icon-folder-opened">{{ node.label }}</span>
                    <span v-if="data.flag === 'table'" class="el-icon-folder-opened">{{ node.label }}</span>
                    <span v-if="data.flag === 'family'" class="el-icon-folder-opened">{{ node.label }}</span>
                  </span>
                </el-tree>
              </div>
    // 获取树形结构默认展开节点,获取到树的数据后,就调这个接口,传入node-key绑定的需要展开的节点的path值
        getRoleTreeRootNode(provincialCenterPath) {
          this.treeExpandData.push(provincialCenterPath)
        },
    rightClick(event, data, node, obj) {
          this.showOpertions = false // 先把模态框关死,目的是:第二次或者第n次右键鼠标的时候 它默认的是true
          this.showOpertions = true
          const menu = document.querySelector('#menu')
          menu.style.left = event.clientX - 220 + 'px'
          menu.style.top = event.clientY - 85 + 'px'
          // 给整个document添加监听鼠标事件,点击任何位置执行closeRightMenu方法,及时将菜单关闭
          document.addEventListener('click', this.closeRightMenu)
        },
        closeRightMenu() {
          this.showOpertions = false
          // 及时关掉鼠标监听事件
          document.removeEventListener('click', this.closeRightMenu)
        },
    loadData(node, resolve) {
          this.$nextTick(() => {
            if (node.level === 0) {
              resolve(this.data)
            }
            if (node.level >= 1) {
              this.getIndex(node, resolve)
            }
          })
        },
        getIndex(node, resolve) {
          this.$get('***/**/***/**', {
            'path': this.folderPath
          }).then(data => {
            const array = []
            for (let i = 0; i < data.length; i++) {
              const jsonList = {}
              jsonList.name = data[i].name
              jsonList.path = data[i].path
              if (data[i].fileFlag === false) {
                jsonList.leaf = false
              } else {
                jsonList.leaf = true
              }
              array.push(jsonList)
            }
            return resolve(array)
          }).catch(data => {
          })
        },

    鼠标右键弹出操作栏的样式设置:

     1  .right-menu {
     2     z-index: 1;
     3     position: absolute;
     4     height: 100px;
     5     width: 100px;
     6     position: absolute;
     7     border-radius: 5px;
     8     border: 1px solid #ccc;
     9     background-color: white;
    10   }
    11   .menu-item {
    12     display: block;
    13     line-height: 20px;
    14     text-align: left;
    15     margin-top: 10px;
    16     font-size: 14px;
    17     color: #606266;
    18   }
    19   li:hover {
    20     background-color: #edf6ff;
    21     color: #606266;
    22   }
  • 相关阅读:
    Qt Creater更改默认构建目录
    QT-无法定位程序输入点解决方案
    Qt qmake报错(TypeError: Property 'asciify' of object Core::Internal::UtilsJsExtension)
    python学习--交互式图形编程实例二
    python学习--交互式图形编程实例一
    python学习--面向对象程序设计实例
    python学习--面向过程程序设计实例
    python学习--程序设计方法实例一
    python学习--字典操作实例二
    python学习--文档
  • 原文地址:https://www.cnblogs.com/qingqing74647464/p/13933731.html
Copyright © 2020-2023  润新知