Tree control
Introduction
Tree has a good hierarchical display effect, such as the hierarchical relationship between companies and departments
Element official code:
<el-tree
:data="data" :
props="defaultProps"
@node-click="handleNodeClick"
></el-tree>
<script>
export default {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
};
</script>
Component effect:
Explanation
<el-tree
:data="data" :
props="defaultProps"
@node-click="handleNodeClick"
></el-tree>
The role of attributes
| Attributes | Features |
|---|---|
| props | And the prop function type of the table tag, which is convenient for other components or the next method to use |
| data | The data required for tree display includes label and children, and the tree is displayed based on the data data |
| node-click | Node click event, when the node is clicked, the response is triggered, and the data data of the component and the node node are passed into the method, which is generally used as an instruction to pass parameters to the backend |
Define a tree control by yourself
About company hierarchy
<!--v:显示-->
<el-tree
:data="depOptions"
:props="defaultProps"
:filter-node-method="filterNode"
node-key="id"
ref="tree"
:default-expanded-keys="['1', '2']"
highlight-current
@node-click="handleNodeClick"
>
</el-tree>
:filter-node-method："filterNode"The method executed when filtering tree nodes. Return true to indicate that the node can be displayed, and return false to indicate that the node will be hidden. filterNodeIs a method defined by myself, returns according to my own judgment conditions trueor yes false, the following is a method defined by myself
<el-input v-model="deptName"></el-input> // 这是一个输入框
<el-tree
:data="depOptions"
:filter-node-method="filterNode"
highlight-current
@node-click="handleNodeClick"
>
</el-tree>
// 进行监听deptName值得变化，当deptName的值发生变化时，就会传参tree的filter
data:{
deptName:{};
}
wathc:{
deptName(val) {
this.$refs.tree.filter(val);
}
}
methods:{
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
}
This function realizes that, enter the department you want to find in the input box, and the tree control will help you filter out the department you want
Search display implementation logic:
