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-treeclass="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-treev-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-popoverplacement="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><divclass="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},
}