Preface
-
The tree structure is a component often used in development, such as area tree, floor tree, organizational structure tree, etc. It contains node relationships.
-
The actual development may require us to select the first node of the tree structure as soon as we enter the page, and call the data to achieve user experience
-
After the user selects, store the floor id through local storage, get the floor id after refreshing, and call the data
-
Or in order to use the experience, we need to highlight it while selecting it, and after the state is maintained, highlight the bound floor id node to prompt the user
-
It remains unchanged, based on document introduction and HTML structure code. We can achieve this in 2 ways
The first one - using the default click selection will add the class name
-
When we open the browser to check, we will find that when the tree node is clicked. A class name will be added to the node
-
When we configure the unique value of the tree structure, the array is selected by default. After ref, we can assign a value after obtaining the floor data, and then listen through the listener. When we notice that the default array is copied, we can find the class name through the document. Click it and the first one will be selected by default
-
Note: Use this.$nextTick() to avoid hierarchy problems
-
Disadvantage: No matter what value is passed in - only the first one will be selected. It should be that clicking will also trigger the shrinkage of the tree structure.
The case code is as follows - can be copied directly
<template>
<div class="box">
<!-- default-checked-key-默认勾选的节点的 key 的数组 -->
<el-tree
ref="myTree"
node-key="id"
:data="data"
:props="defaultProps"
:default-checked-keys="checkedkeys"
>
</el-tree>
</div>
</template>
<script>
export default {
data() {
return {
// 树形结构数据
data: [
{
id: "0p150",
name: "深圳QQQQ科技有限公司",
children: [
{
id: 12070579,
name: "一楼",
parentId: 0,
orderNum: null,
},
{
id: 12075624,
name: "二楼",
parentId: 0,
orderNum: null,
},
],
},
{
id: "0p151",
name: "wertw",
children: [],
},
{
id: "0p152",
name: "qqqqq",
children: [
{
id: 120725697,
name: "一楼",
parentId: 0,
orderNum: null,
},
{
id: 1207236195,
name: "二楼",
parentId: 0,
orderNum: null,
},
],
},
{
id: "0p154",
name: "1231",
children: [],
},
{
id: "0p155",
name: "123",
children: [],
},
{
id: "0p156",
name: "123123",
children: [],
},
],
// 树形结构数据配置
defaultProps: {
id: "id",
label: "name",
children: "children",
},
//
checkedkeys: [],
};
},
// 侦听器
watch: {
checkedkeys: {
// immediate: true,
handler: function (newVal, oldVal) {
if (newVal) {
this.$nextTick(() => {
// tree树结构点击会加上下面这个类名
// 如果默认全部展开-那就会关闭
document.querySelector(".el-tree-node__content").click();
});
}
},
},
},
mounted() {
// 使用$nextTick 等页面加载完毕之后-在选中，防止加载顺序问题
this.$nextTick(function () {
// 通过ref找到树节点
// 通过树结构设置node-key
// 结果-选中第一个
this.checkedkeys.push(this.data[0].id);
// 结果固定id-选中第一个
// this.checkedkeys.push('0p150');
// 结果-子集选中第一个
// this.checkedkeys.push(12070579);
// 节点key 结果选中第一个
// this.checkedkeys.push(["0p150", 12070579]);
});
// 结论：不管传入什么，只会通过侦听器选中树结构第一个
},
};
</script>
<style lang="scss" scoped>
// 点击选中颜色
</style>The second method - providing api through highlighted attributes + tree - recommended
-
When we configure the unique value of the tree structure, highlight the current node attribute, after ref,
-
We take the first data id in the place where the attribute structure data is obtained, and pass it into the api, so that the current node can be connected
-
Note: Use this.$nextTick() to avoid hierarchy problems
-
Advantages: You only need to pass the unique value id of the tree structure into the API to select any node in the tree structure and highlight it - in line with actual development
The case code is as follows - can be copied directly
<template>
<div class="box">
<!-- default-expand-all-展开全部 -->
<!-- highlight-current- 是否高亮当前选中节点 -->
<el-tree
ref="myTree"
node-key="id"
:data="data"
:props="defaultProps"
highlight-current
default-expand-all
>
</el-tree>
</div>
</template>
<script>
export default {
data() {
return {
// 树形结构数据
data: [
{
id: "0p150",
name: "深圳QQQQ科技有限公司",
children: [
{
id: 12070579,
name: "一楼",
parentId: 0,
orderNum: null,
},
{
id: 12075624,
name: "二楼",
parentId: 0,
orderNum: null,
},
],
},
{
id: "0p151",
name: "wertw",
children: [],
},
{
id: "0p152",
name: "qqqqq",
children: [
{
id: 120725697,
name: "一楼",
parentId: 0,
orderNum: null,
},
{
id: 1207236195,
name: "二楼",
parentId: 0,
orderNum: null,
},
],
},
{
id: "0p154",
name: "1231",
children: [],
},
{
id: "0p155",
name: "123",
children: [],
},
{
id: "0p156",
name: "123123",
children: [],
},
],
// 树形结构数据配置
defaultProps: {
id: "id",
label: "name",
children: "children",
},
};
},
mounted() {
// 使用$nextTick 等页面加载完毕之后-在选中，防止加载顺序问题
this.$nextTick(function () {
// 通过ref找到树节点
// 通过树结构设置node-key，通过唯一id来高亮节点
// setCurrentKey-通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性
// 这行不会选中
this.$refs.myTree.setCurrentKey(this.data[0].id);
// 这行会生效
this.$refs.myTree.setCurrentKey(this.data[0].children[0].id);
});
},
};
</script>
<style lang="scss" scoped>
// 设置高亮颜色
::v-deep
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
background-color: #baf !important;
}
</style>Summarize:
After this process, I believe you also have a preliminary impression of the element-tree tree structure - the first node is highlighted by default - the node is highlighted according to the id, but in actual development, the situation we encountered must be They are different, so we have to understand its principle, and it is always the same. Come on, hit the workers!
Please point out any shortcomings, thank you - Feng Guo Wuhen