Tree 树形控件
简介
Tree树形有很好层级展示效果,如公司和部门之间的层级关系
Element官方的代码:
<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>
组件效果:
解释
<el-tree
:data="data" :
props="defaultProps"
@node-click="handleNodeClick"
></el-tree>
属性的作用
属性 | 功能 |
---|---|
props | 和table标签的prop功能类型,方便其他组件或下一个方法使用 |
data | 树形显示需要的数据其中包含label和children,树形根据data数据进行显示 |
node-click | 节点点击事件,当节点被点击时触发响应,并将组件的data数据,node节点传入方法内,一般作为向后端传参的指令 |
自己定义一个Tree树形控件
关于公司层级
<!--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"
对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏。filterNode
是自己定义的方法,根据自己的判断条件进行返回true
或者是false
,下面是我自己定义的方法
<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;
},
}
此功能实现的是,在输入框输入想要查找的部门,tree控件帮你筛选出你想要的部门
搜索显示实现逻辑: