Element UI el-tree-select 只展示第一层数据：实现父级类目下拉菜单优化

在使用 Element UI 的 el-tree-select 组件时，我们可能需要实现只展示第一层数据，不展开子级的功能，比如在选择父级类目时，只需要展示一级类目，而不需要展示其子类目。本文将介绍如何实现该功能。

问题描述

默认情况下，el-tree-select 会展开所有层级的数据。在某些场景下，我们只需要展示第一层数据，不展示子级数据，以提高用户体验。

解决方案

为了实现只展示第一层数据的需求，我们可以通过设置 el-tree-select 的 props 属性中的 lazy 属性为 true，并同时设置 load 方法只加载第一层的数据。

修改后的代码：

在 Vue 实例中添加 `loadData` 方法：

data() {
    return {
        // ...
    };
},
methods: {
    loadData(node, resolve) {
        if (node.level === 0) {
            resolve(this.CategoryList);
        } else {
            resolve([]);
        }
    },
},

这样修改后，el-tree-select 只会展示第一层的数据，不会展开显示子级数据。

总结

通过设置 lazy 属性和 load 方法，我们可以轻松控制 el-tree-select 的展开深度，提高用户体验。希望本文对您有所帮助！