el-tree方法的整理

1.点击树的文字不要收缩仅点击图标的时候收缩

expand-on-click-node：是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。

  <el-tree
      :expand-on-click-node="false"
      :data="data"
      node-key="id"
      default-expand-all
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
      draggable
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
    >
    </el-tree>

2.当前选中样式自定义

设置 :highlight-current="true" 从而高亮当前选中节点

.catalog-tree .el-tree-node:focus > .el-tree-node__content {
  background-color: #f0f5ff !important;
  color: #409eff !important;
}

.catalog-tree  .el-tree-node.is-current > .el-tree-node__content {
  background-color: #f0f5ff !important;
  color: #409eff !important;
}

.catalog-tree为给树形结构自定义的类名

 <el-tree
        class="catalog-tree"
        :data="treedata"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :highlight-current="true"
        draggable
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
      >

3.el-tree 动态指定默认选中节点

核心代码
highlight-current 高亮选中节点
:current-node-key="current" 自定义current变量，存储默认选中节点对应的key值
v-if="current" 因是动态绑定，最开始current为空，所以需在current有值后，才渲染 el-tree

 mounted() {
  this.current = '对应想要赋值的id'
},

4.el-tree 指定当前选中节点样式，点击时focus样式，hover时样式

/* 点击样式 */
.catalog-tree .el-tree-node:focus > .el-tree-node__content {
  background-color: #FFFFFF;
  color: #606266;
}

/* hover */
.catalog-tree .el-tree-node__content:hover{
  background-color: #f0f5ff !important;
  color: #409eff !important;
}
/* 当前选中节点 */
.catalog-tree .el-tree-node.is-current > .el-tree-node__content {
  background-color: #f0f5ff !important;
  color: #409eff !important;
}

5.tree点击节点时让其选中指定节点，在tree上添加自定义的选中节点

 <el-tree
          v-if="current!=''"
          ref="mulutree"
          :current-node-key="current"
          class="catalog-tree"
          :data="treedata"
          :props="defaultProps"
          node-key="id"
          :expand-on-click-node="false"
          :default-expand-all="true"
          draggable
          :allow-drop="allowDrop"
          :allow-drag="allowDrag"
          @node-click="handleNodeClick"
        >
          <div class="catalogue-tree-node" slot-scope="{ node, data }">
            <div class="headlineText">{{ node.label }}</div>
            <el-popover
              placement="bottom"
              trigger="click"
              popper-class="fuwenbenCustomPopper"
              :ref="'popover-' + node.level + '-' + node.id"
            >
              <div style="text-align: left">
                <div class="sectionSet" @click="appendSiblingTree(node, data)">
                  添加同级章节
                </div>
                <div class="sectionSet" @click="appendTree(node, data)">
                  添加子章节
                </div>
                <div class="sectionSet" @click="setTreeName(node, data)">
                  章节设置
                </div>
                <div
                  class="sectionSet"
                  @click="exportToDocx('child', node, data)"
                >
                  下载章节
                </div>
                <div class="sectionSet" @click="removeTree(node, data)">
                  删除
                </div>
              </div>
              <div slot="reference" class="catalogueEdit">
                <i class="el-icon-more"></i>
              </div>
            </el-popover>
          </div>
        </el-tree>
 methods: {
    handleNodeClick(data,Node) {
      // 点击树形结构节点
      this.current = ""
      this.current = 1754462696445;
      this.$refs.mulutree.setCurrentKey(1754462696445)
    },
}

6.给el-tree目录前面加序号 带层级关系的 1.1.1 1.1.2 2.1.1 .等等

效果如下：

代码如下：

<el-tree
  :data="treeData"
  node-key="id"
>
  <div class="catalogue-tree-node" slot-scope="{ node, data }">
  	 {{ getLevelIndex(node) }}//这里调用方法
     {{ node.label }}
  </div>
</el-tree>


methods: {
    getLevelIndex(node) {
      const getIndexPath = (node) => {
        if (!node.parent) return [];
        const parentPath = getIndexPath(node.parent);
        const currentIndex =
          node.parent.childNodes.findIndex((n) => n.data.id === node.data.id) +
          1;
        return [...parentPath, currentIndex];
      };

      let index = getIndexPath(node).join(".");
      return index;//没有层级限制，多少层都可以用
    },
}

7.el-tree目录前面加元素索引

效果如下：

代码如下：

<el-tree
  :data="treeData"
  node-key="id"
>
  <div class="catalogue-tree-node" slot-scope="{ node, data }">
  	 {{ getLevelIndex(node) }}//这里调用方法
     {{ node.label }}
  </div>
</el-tree>


methods: {
    getLevelIndex(node) {
     // 获取当前节点在同级中的索引，从1开始
       return node.parent ? node.parent.childNodes.findIndex(n => n.data.id === node.data.id) + 1 : 1
    },
}