需求：

1. 进入页面，默认选中需要的节点，并展开+做出高亮效果，其他时候点击箭头图标才展开。

2. input框搜索树节点

代码：

        <el-asideclass="aside flex-shrink-0 bg-white"style="width:300px;height: 100%;"><div><el-inputv-model="filterText"class="filterInput"placeholder="请输入单位名称关键字"clearable/><div class="problem-orgTree"><el-treeref="deptTree":data="deptOptions":props="defaultProps"accordion:filter-node-method="filterNode"highlight-currentnode-key="id":expand-on-click-node="false":default-expanded-keys="defaultShowKeys"@node-click="handleNodeClick"/></div></div></el-aside>

<script>
export default {data() {return {deptOptions: [],defaultProps: {children: 'children',label: 'label',},defaultShowKeys: [],filterText: '', // 搜索文本belongdCompId: '', // 选中的树节点id}},watch: {filterText(val) {this.$refs.deptTree.filter(val);},},mounted() {if (this.$route.query.deptId) {this.belongdCompId = this.$route.query.deptId;}},methods: {getTreeselect() {// 调用接口获取树结构treeselectOnlyOrg().then((response) => {this.deptOptions = response.data;this.$nextTick(() => {// 高亮选中的节点this.$refs.deptTree.setCurrentKey(this.belongdCompId);// 默认展开this.defaultShowKeys.push(this.belongdCompId);});});},// 筛选filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;},// 节点单击事件handleNodeClick(data) {this.belongdCompId = data.id;},}
}
</script>
<style lang="scss">
.problem-orgTree {padding-right: 5px;padding-bottom: 10px;// 超出换行.el-tree {.el-tree-node {white-space: normal;outline: 0;}.el-tree-node__content {height: 100% !important;word-break: break-all !important;white-space: pre-wrap !important;word-wrap: break-word !important;}.el-tree-node__label {word-break: break-all !important;white-space: pre-wrap !important;word-wrap: break-word !important;}}// 高亮选中.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {color: #006569;}
}</style>