笔记:
<el-tree
ref="tree"
node-key="id"
class="filter-tree"
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick"
:expand-on-click-node="false"
:filter-node-method="filterNode"
:default-expanded-keys="defaultExpand"
:default-checked-keys="defaultCheck"
:current-node-key="currentCheck"
:highlight-current="true"
>
</el-tree>
data() {
return {
filterText: '',
defaultProps: {
children: 'childrenList',
label: 'text'
},
// 点击节点
nodeClickData: [],
defaultExpand: [], // 默认展开
defaultCheck: [], // 默认选中节点
currentCheck: '', // 当前选中的节点
}
},
watch: {
treeData:{
handler(value){
this.expandTree(value)
},
immediate:true,
},
filterText(val) {
this.$refs.tree.filter(val);
},
currentCheck:{
handler(value){
if (value.toString()) {
// setCurrentKey函数必须放到$nextTick里面,否则tree还未渲染上,找不到tree
this.$nextTick(() => {
this.$refs['tree'].setCurrentKey(value)
})
}
},
immediate:true,
},
},
methods: {
// 默认展示
expandTree(){
let that = this;
const tree = that.treeData
// 1:企业;4:运行部;DEVICE:装置
if (tree.length > 0){
that.getDefaultShow(tree)
}
},
getDefaultShow(list){
// 企业进来:默认展示装置树上第一个部门下所有装置;
// 总部进来:默认展示装置树上第一个企业第一个部门下所有装置;
if (list[0].type === 'DEVICE'){
this.defaultCheck = [list[0].id]
this.currentCheck = list[0].id
this.handleNodeClick(list[0])
} else {
if (list[0].type === '4'){
this.defaultExpand = [list[0].id]
}
this.getDefaultShow(list[0].childrenList)
}
},
}
1)current-node-key:若在data里定义初始值,可以实现高亮效果,但若动态赋值高亮,则没有高亮效果,所以需要放到watch里检测变化
2)current-node-key和setCurrentKey方法同时使用才会达到效果