1 创建数据源

登录微搭控制台，点击新建数据模型
在这里插入图片描述
输入名称和标识

我们输入两个字段，分别是项目名称和任务名称

回到数据模型的列表，点击更多，点击管理数据

录入几条测试数据

我们这里的目的就是提取项目名称的信息，去掉重复的内容

2 创建APIs

去重我们可以创建APIs来实现，点击APIs，点击新建APIs
在这里插入图片描述
选择自定义代码

输入名称和标识

输入方法的名称和标识，输入如下的代码

module.exports = async function (params, context) {// 这里是方法入参const result = await context.callModel({name: 'xlxxsl_zyo3scs', // 数据模型标识，可以前往「数据源 - 数据模型」列表页查看methodName: 'wedaGetRecords', // 数据模型方法标识，支持的方法可以前往「数据源 - 数据模型」的任一数据模型详情页查看当前模型支持的方法params: {}, // 数据模型方法的入参});let records = result.records.map((item)=>{return item.xmmc})let finallyarr = Array.from(new Set(records))console.log(records)// 这里返回数据，和出参结构映射return finallyarr.map((item)=>{return {"label":item,"value":item}});
};

代码的意思，第一步我们通过数据模型的API来获取数据源的数据

 const result = await context.callModel({name: 'xlxxsl_zyo3scs', // 数据模型标识，可以前往「数据源 - 数据模型」列表页查看methodName: 'wedaGetRecords', // 数据模型方法标识，支持的方法可以前往「数据源 - 数据模型」的任一数据模型详情页查看当前模型支持的方法params: {}, // 数据模型方法的入参});

我们现在获取的话数组的元素是对象，我们需要提取项目名称这个字段，因此使用数组的map方法重新处理一下结果

let records = result.records.map((item)=>{return item.xmmc})

有了数组之后，我们就可以去重了，使用 Set 数据结构来去除重复元素，将数组转换为 Set，再将 Set 转换回数组即可

let finallyarr = Array.from(new Set(records))

最后我们返回结果的时候要按照下拉组件的要求，将数据处理成对象结构，label是选项的显示名称，而value是选项的选中值

return finallyarr.map((item)=>{return {"label":item,"value":item}});

代码写好了之后点击方法测试，测试成功，点击出参映射
在这里插入图片描述

3 搭建页面

我们创建一个页面，里边放入下拉选项组件
在这里插入图片描述
我们定义一个变量来接收数据源的数据，类型选择数组，输入默认值

默认值输入如下数据

[{"label":"","value":""}]

打开代码编辑器，我们在生命周期函数中将API的数据赋值给变量
在这里插入图片描述

export default {async onPageLoad(query) {//console.log('---------> LifeCycle onPageLoad', query)$page.dataset.state.projectitems = await app.cloud.callConnector({name:'getUniName_nvr1a98',methodName:'fileterArray',params:{}})console.log($page.dataset.state.projectitems)},onPageShow() {//console.log('---------> LifeCycle onPageShow')},onPageReady() {//console.log('---------> LifeCycle onPageReady')},onPageHide() {//console.log('---------> LifeCycle onPageHide')},onPageUnload() {//console.log('---------> LifeCycle onPageUnload')},
}

然后给下拉项组件绑定数据，绑定为我们的变量
在这里插入图片描述