![](https://img-blog.csdnimg.cn/direct/39899071ecdc4278b365a9993381161e.png)
<template>
<el-tree
ref="tree"
:data="data"
:props="defaultProps"
:default-checked-keys="defaultCheck"
:current-node-key="currentCheck"
default-expand-all
:highlight-current="true"
node-key="id"
></el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '二级 1-1',
},
],
},
// ... 更多节点数据
],
defaultProps: {
children: 'children',
label: 'label',
},
defaultCheck: [], // 默认选中节点
currentCheck: '', // 当前选中的节点
};
},
methods: {
// 默认展示
expandTree() {
let that = this;
const tree = that.data
this.defaultCheck = ['1']
this.currentCheck = '1'
},
},
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,
},
},
};
</script>
created() {
this.getTreeData();
},
methods: {
/** 查询下拉树结构 */
getTreeData() {
treeselect().then(response => {
// 后台返回数据
this.treeData = response.data;
if(response.data.length > 0) {
this.handleNodeClick(response.data[0]);
this.$nextTick(() => {
this.$refs['tree'].setCurrentKey(response.data[0].id)
})
}
})
},