如何实现Vue2 ElementUI的el-tree选中、高亮、定位功能？

本文共计1130个文字，预计阅读时间需要5分钟。

在使用无选择框的el-tree时遇到的坑及如何使用el-tree：

el-tree 是一个强大的树形控件，但在使用过程中可能会遇到一些问题。以下是一些常见问题及解决方案：

1. 坑：如何避免只打开一个同级树节点？

解决方案：设置属性 `default-expand-all` 为 `true`，默认展开所有节点。

2. 坑：如何查看用户的选择？

解决方案：使用 `ref` 属性引用el-tree组件，然后在Vue中通过ref获取到el-tree的实例，调用相应的方法来获取选中节点。

以下是使用el-tree的示例代码：

这段代码实现了以下功能：

- 使用el-tree展示树形结构。- 默认展开所有节点。- 监听节点点击事件，打印点击的节点信息。- 获取选中节点信息，打印到控制台。

注意：在实际应用中，你可能需要根据需求调整代码。

在使用无选择框的el-tree时遇到的坑以及如何使用el-tree

最后附全部代码

ref="tree" ----> 必须写 accordion ----> 是否每次只打开一个同级树节点展开 看个人选择 default-expand-all ----> 默认打开全部节点 :data="leftData" ----> 必写 展示数据 @node-click="handleNodeClick" ----> 节点被点击时的回调 node-key="listId" ----> 设置选中的数据 必须写 注意不要写 ':' 我当时就是写了 找错找了得有好几个小时 哭死 :current-node-key="currentNodeKey" ----> 设置选中必须写 :highlight-current="true" ----> 设置高亮 必须写 :props="defaultProps" ----> 可以配置节点标签的属性值

props的配置

HTML部分

<el-tree ref="tree" default-expand-all :data="data" @node-click="handleNodeClick" node-key="id" :current-node-key="currentNodeKey" :highlight-current="true" :props="defaultProps" > <span class="custom-tree-node" slot-scope="{ node, data }"> <span :id="data.id">{{ node.label }}</span> </span> </el-tree> <el-button @click="nodeClick1" type="primary">点击后选中id为006的</el-button>

JS部分

<script> export default { data() { return { data: [ { id: 1, name: "一级 1", children: [ { id: 4, name: "二级 1-1", children: [ { id: 9, name: "三级 1-1-1", }, { id: 10, name: "三级 1-1-2", }, ], }, ], }, { id: 2, name: "一级 2", children: [ { id: "005", name: "二级 2-1", }, { id: "006", name: "二级 2-2", }, ], }, { id: 3, name: "一级 3", children: [ { id: 7, name: "二级 3-1", }, { id: 8, name: "二级 3-2", children: [ { id: 11, name: "三级 3-2-1", }, { id: 12, name: "三级 3-2-2", }, { id: 13, name: "三级 3-2-3", }, ], }, ], }, ], defaultProps: { children: "children", label: "name", }, currentNodeKey: "", }; }, watch: { currentNodeKey(newVal) { if (newVal.toString()) { this.$refs["tree"].setCurrentKey(newVal); } else { this.$refs["tree"].setCurrentKey(null); } }, }, methods: { // 点击节点 handleNodeClick(data,node){ this.currentNodeKey = data.id; // 判断点击的层级进行操作 if(node.level == 1){ console.log('第一层data1',data); console.log('第一层node1',node); }else if(node.level == 2){ console.log('第二层data2',data); console.log('第二层node2',node); }else if(node.level == 3){ console.log('第三层data3',data); console.log('第三层node3',node); } }, nodeClick1(){ // 点击选中006号 this.$refs.tree.setCurrentKey('006'); }, // 如果数据过多可以调用这个方法并传入要显示的id //滚动到选中定位的位置 selectedRegion(id) { console.log("滚动到选中定位的位置"); // 通过Id获取到对应的dom元素 const node = document.getElementById(id); setTimeout(() => { if (node) { this.$nextTick(() => { // 通过scrollIntoView方法将对应的dom元素定位到可见区域 这个属性是在垂直方向居中显示 node.scrollIntoView({ block: "center" }); }); } }, 100); }, }, }; </script>

修改样式

<style scoped> /* 点击时的样式 */ .el-tree ::v-deep.el-tree-node:focus > .el-tree-node__content { background-color: #edf3fc !important; border-radius: 8px; } /* tree 的高度和宽度重新定义 */ ::v-deep.el-tree .el-tree-node > .el-tree-node__content { width: 300px; height: 40px; } /* 鼠标hover改变背景颜色 */ .el-tree ::v-deep.el-tree-node > .el-tree-node__content:hover { background-color: #edf3fc !important; border-radius: 8px; } /* 颜色高亮 */ ::v-deep.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { background-color: #edf3fc !important; border-radius: 8px; } </style>

附上全部代码

<style scoped> /* 点击时的样式 */ .el-tree ::v-deep.el-tree-node:focus > .el-tree-node__content { background-color: #edf3fc !important; border-radius: 8px; } /* tree 的高度和宽度重新定义 */ ::v-deep.el-tree .el-tree-node > .el-tree-node__content { width: 300px; height: 40px; } /* 鼠标hover改变背景颜色 */ .el-tree ::v-deep.el-tree-node > .el-tree-node__content:hover { background-color: #edf3fc !important; border-radius: 8px; } /* 颜色高亮 */ ::v-deep.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { background-color: #edf3fc !important; border-radius: 8px; } </style>

到此这篇关于vue2+elementUI的el-tree的选中、高亮、定位的文章就介绍到这了,更多相关vue2elementUI选中、高亮、定位内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！