element Tree 树形控件高亮默认

需求：

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

代码：

html 复制代码

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

javascript 复制代码

<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>

element Tree 树形控件 高亮默认

element Tree 树形控件高亮默认