SharePoint ElementPlus 进行 el-select 远程搜索

1.SharePoint 人员搜索

2.el-select远程搜索

创建el-select时勾选

SharePoint 远程搜索 

<script lang="ts" setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import "@pnp/sp/profiles";
import "@pnp/sp/sputilities";
import "@pnp/sp/site-users/web";
import "@pnp/sp/site-groups";
// 获取当前实例并提取需要的属性和方法
const { proxy } = getCurrentInstance();
const sp = proxy.$SP;
interface ListItem {
  value: string;
  label: string;
}
const list = ref<ListItem[]>([]);
const options = ref<ListItem[]>([]);
const value = ref<string[]>([]);
const loading = ref(false);
onMounted(() => {
  list.value = states.map((item) => {
    return { value: `value:${item}`, label: `label:${item}` };
  });
});

//远程搜索
const remoteMethod = async (query: string) => {
  if (query) {
    // 设置加载状态为 true，表示开始加载
    loading.value = true;
    // 使用 SharePoint Profiles API 的 clientPeoplePickerSearchUser 方法搜索用户
    const value = await sp.profiles.clientPeoplePickerSearchUser({
      SharePointGroupID: 0,
      AllowEmailAddresses: true,
      AllowMultipleEntities: false,
      AllUrlZones: false,
      MaximumEntitySuggestions: 50,
      PrincipalSource: 15,
      PrincipalType: 1,
      QueryString: query,
    });
    // 将返回的用户数据映射为对象，并存储在 Options.value 中
    options.value = value.map((user) => ({ value: user.Key, label: user.DisplayText, EntityData: user.EntityData }));
    console.log(options.value);
    console.log(value);

    loading.value = false;
  }
};

实现sharepoin人员搜索