vue el-tree添加层级指示线

### Vue El-Tree 组件中禁止选择第三层级节点的方法 为了实现在 `el-tree` 中禁止选择第三层级节点的功能，可以利用 `node-click` 事件来控制用户的交互行为。当点击某个节点时，判断该节点所在的层级，如果处于第三层，则阻止默认的选择操作。 具体实现方式如下： #### 方法一：通过监听 node-click 事件并取消冒泡 ```javascript <template> <div> <el-tree :data="treeData" @node-click="handleNodeClick"></el-tree> </div> </template> <script> export default { data() { return { treeData: [ // 树结构数据... ] }; }, methods: { handleNodeClick(data, node) { const level = node.level; if (level === 3) { // 如果是第3级节点 this.$message({ message: '无法选择第三层级节点', type: 'warning' }); event.stopPropagation(); // 阻止事件传播到父元素上触发选中效果 return false; // 返回false表示不执行后续逻辑 } } } }; </script> ``` 这种方法能够有效地拦截用户对于特定层次节点的操作请求，并给出提示信息告知用户当前不允许进行此操作[^1]。 #### 方法二：自定义 render-content 属性渲染函数 另一种更灵活的方式是在创建树形菜单的时候就加入对每一项是否可被选中的属性设置，在模板里使用 `render-content` 来定制化显示内容的同时也处理好不可选项的状态管理。 ```html <template> <div> <el-tree :data="treeData" show-checkbox node-key="id" ref="tree"> <!-- 自定义每项的内容 --> <span slot-scope="{ node, data }" class="custom-tree-node"> <span>{{ node.label }}</span> <span v-if="!isThirdLevel(node)"> <el-button size="mini">按钮A</el-button> <el-button size="mini">按钮B</el-button> </span> </span> </el-tree> </div> </template> <script> import { Tree as ElTree } from 'element-ui'; export default { components: { ElTree }, computed: { isThirdLevel () { return function (node) { return node.level !== 3; } } }, mounted () { this.init(); }, methods: { init () { let that = this; setTimeout(() => { that.treeData.forEach((item, index) => { item.disabled = !that.isThirdLevel({ ...this.$refs.tree.getNode(item.id), label: item.name }); if (item.children && Array.isArray(item.children)) { item.children.forEach(childItem => { childItem.disabled = true; if (childItem.children && Array.isArray(childItem.children)) { childItem.children.forEach(grandChildItem => { grandChildItem.disabled = true; }) } }) } }) this.$forceUpdate(); }, 0); } } } </script> ``` 在这个例子中，通过计算属性 `isThirdLevel()` 判断节点级别，并据此决定哪些项目应该禁用。同时也可以根据实际需求调整样式或增加其他功能性的按钮等。