如何将SPFx Web部件属性改为下拉框并动态填充Contacts列表Department选项

步骤1：导入所需依赖 #

在Web部件的ts文件头部导入下拉控件和SP请求相关模块：

import { PropertyPaneDropdown, IPropertyPaneDropdownOption } from '@microsoft/sp-property-pane';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

步骤2：定义存储下拉选项的变量 #

在Web部件类内部新增变量，用于存储加载到的部门选项：

private departmentOptions: IPropertyPaneDropdownOption[] = [];

步骤3：实现异步拉取部门选项的方法 #

在Web部件类中新增方法，从Contacts列表的Department选项字段中获取可选值：

private async loadDepartmentOptions(): Promise<void> {
  try {
    const webUrl = this.context.pageContext.web.absoluteUrl;
    // 请求Contacts列表的Department字段定义
    const response = await this.context.spHttpClient.get(
      `${webUrl}/_api/web/lists/getbytitle('Contacts')/fields/getbyinternalnameortitle('Department')`,
      SPHttpClient.configurations.v1,
      {
        headers: {
          'Accept': 'application/json;odata=nometadata'
        }
      }
    );
    const fieldData = await response.json();
    // 把选项字段的可选值组装为下拉控件识别的格式
    this.departmentOptions = fieldData.Choices.map((choice: string, index: number) => {
      return {
        key: choice,
        text: choice
      };
    });
  } catch (error) {
    console.error('部门选项加载失败：', error);
    // 可选：添加加载失败兜底选项
    this.departmentOptions = [{ key: 'loadFailed', text: '选项加载失败' }];
  }
}

步骤4：重写属性窗格加载生命周期方法，提前加载选项 #

在Web部件类中重写onPropertyPaneConfigurationStart方法，保证属性窗格打开前完成选项拉取：

protected async onPropertyPaneConfigurationStart(): Promise<void> {
  await this.loadDepartmentOptions();
  // 选项加载完成后刷新属性窗格，渲染最新选项
  this.context.propertyPane.refresh();
}

步骤5：修改属性窗格配置，替换文本框为下拉框 #

调整你原有的getPropertyPaneConfiguration方法，将文本输入框替换为下拉控件：

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: {
          description: strings.PropertyPaneDescription
        },
        groups: [
          {
            groupName: strings.BasicGroupName,
            groupFields: [
              PropertyPaneDropdown('department', {
                label: 'Department',
                options: this.departmentOptions,
                selectedKey: this.properties.department,
                // 可选：配置是否允许空选
                allowEmptySelection: false
              })
            ]
          }
        ]
      }
    ]
  };
}

注意：如果Contacts列表的Department字段内部名称、列表显示名称有自定义修改，需要对应调整请求接口中的列表名和字段名参数。

内容的提问来源于stack exchange，提问作者John John