Element UI TreeSelect 组件：如何只展示一级类目？

如果需要在 Element UI 的 TreeSelect 组件中只展示一级类目而不展示二级类目，可以对数据源进行处理，只保留一级类目的数据。可以在获取数据源的地方进行处理，或者在组件内部进行处理，具体代码如下：

<el-form-item label='父级类目' prop='parentCategoryId'>
  <el-tree-select ref='tree' v-model='formData.parentCategoryId' clearable :data='filteredCategoryList'
    node-key='id' check-strictly :default-expanded-keys='[formData.parentCategoryId]'
    :default-checked-keys='[formData.parentCategoryId]'
    :props='{ label: 'categoryName', value: 'categoryId' }' :suffix-icon='CaretBottom'
    style='width: 450px' placeholder='请选择父级类目名称' />
</el-form-item>

data() {
  return {
    CategoryList: [], // 原始类目数据
    filteredCategoryList: [] // 过滤后的一级类目数据
  };
},
mounted() {
  // 获取原始类目数据
  this.fetchCategoryList();
},
methods: {
  fetchCategoryList() {
    // 模拟获取类目数据，假设数据结构为 { categoryId, categoryName, parentId }
    const rawData = [
      { categoryId: 1, categoryName: '类目1', parentId: 0 },
      { categoryId: 2, categoryName: '类目2', parentId: 0 },
      { categoryId: 3, categoryName: '类目3', parentId: 1 },
      { categoryId: 4, categoryName: '类目4', parentId: 2 }
      // ...
    ];

    // 过滤后只保留一级类目
    this.filteredCategoryList = rawData.filter(item => item.parentId === 0);

    // 将原始类目数据保存下来，以备其他操作需要
    this.CategoryList = rawData;
  }
}

在以上代码中，filteredCategoryList 是经过过滤后只保留一级类目的数据，然后将其赋值给 el-tree-select 的 data 属性即可。