vue2+elementUI的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元素定位到可见区域 【block: 'center'】这个属性是在垂直方向居中显示
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>
附上全部代码
<template>
<div>
<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
>
div>
template>
<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元素定位到可见区域 【block: 'center'】这个属性是在垂直方向居中显示
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>