【分享】下拉选项,远程获取数据,根据条件设置颜色,并按颜色排序

简介: 有时候需要用下拉选项来只管展示数据的(库存)剩余情况,我拿宜搭下拉选择组件的颜色属性来做展示(大家可以举一反三)

下面是未开启颜色区别,无法直观区别出哪些地方有剩余车位

image.png

下面是用代码进行颜色区分,能立即展示出当前哪些地区还有剩余车位。

绿色代表有车位,红色代表没车位.

image.png

下面介绍实现方法:

1. 打开组件的彩色选项

image.png

2. 在配置组件的弹层变化事件

image.png

3. 在弹层变化中粘贴下方代码

/*** selectField onVisibleChange* @param visible: {Boolean} 下拉框是否显示*/exportfunctiononVisibleChange(visible) {
//如果弹层显示就获取数据源//this.dataSourceMap.getSurplusCount是我配置好的数据源,获取各个停车区域数据visible&&this.dataSourceMap.getSurplusCount.load({
"formUuid": "FORM-0A966I813EQ3N6196H6TX547WUO22N59U6S9L62",
pageSize: 50,
  }).then(res=> {
//将获取到的远程数据源(停车场数据)转换成带颜色的下拉选项letdataSource=res.data.map(item=> ({
//当前停车场剩余车位小于0就变红色,反之绿色color: item.formData.numberField_paaf7dc<=0?"#ff6b7a" : "#01b852",
//下拉选项的显示内容text: item.formData.selectField_1jtwm2x,
//下拉选项的值value: item.formData.selectField_1jtwm2x,
    }))
//将下拉选项按颜色重新排序dataSource=_.orderBy(dataSource, ['color'], ['asc']);
//将下拉选项赋值给下拉组件this.$('selectField_l9m481qb').set('dataSource', dataSource);
  });
}
目录
相关文章
|
人工智能 前端开发 JavaScript
纯干货!如何用Cursor+宜搭,3天完成三周开发量(附超详细视频教学)
Cursor是热门代码编辑器之一,通过与宜搭(Yida)结合,提供了强大的低代码页面和自定义组件生成能力。方案利用Claude模型的代码生成能力及MCP支持,大幅提升开发效率。开发者可通过Cursor连接宜搭表单设计器或自定义组件设计器,实现React源码的生成与同步,并支持二次编辑。现有功能涵盖文本、数字、图片、链接等多种字段类型,以及属性面板配置、JS代码生成等。
2845 85
|
人工智能 自然语言处理 JavaScript
宜搭上新,DeepSeek 插件来了!
钉钉宜搭近日上线了DeepSeek插件,无需编写复杂代码,普通用户也能轻松调用强大的AI大模型能力。安装后,平台新增「AI生成」组件,支持创意内容生成、JS代码编译、工作汇报等场景,大幅提升工作效率。快来体验这一高效智能的办公方式吧!
3172 9
|
11月前
|
Java API 网络架构
java调用api接口自动判断节假日信息
java调用api接口自动判断节假日信息
3788 0
|
人工智能 搜索推荐 前端开发
OpenDeepSearch:搜索引擎革命!这个开源深度搜索工具让AI代理直接读懂网页,复杂问题一键拆解
OpenDeepSearch是基于开源推理模型的深度搜索工具,通过语义重排和多源整合优化检索效果,支持与AI代理无缝集成,提供快速和专业两种搜索模式。
981 10
OpenDeepSearch:搜索引擎革命!这个开源深度搜索工具让AI代理直接读懂网页,复杂问题一键拆解
|
敏捷开发 存储 SQL
Quick BI × 宜搭:低代码敏捷开发与专业数据分析的完美融合,驱动企业数字化转型新范式
钉钉低代码平台宜搭与瓴羊QuickBI深度融合,提供前端敏捷构建+后端智能决策的解决方案。通过无缝对接的数据收集与分析、一站式数据分析及报表嵌入等功能,实现业务与数据双重赋能。
990 3
宜搭接入钉钉闪记,会议记录、拜访录入效率飙升!
钉钉闪记是一款实时记录并快速实现语音转文字的工具,特别适合处理冗长的会议或培训视频。通过与宜搭平台的无缝集成,用户可以一键获取会议的关键知识点和重要内容片段,自动生成结构清晰的会议纪要,极大提升了工作效率。无论是销售拜访还是头脑风暴,闪记都能显著减少整理会议资料的时间,为企业带来高效的办公体验。
1387 12
|
人工智能 自然语言处理 数据可视化
Cursor 为低代码加速,AI 生成应用新体验!
通过连接 Cursor,打破了传统低代码开发的局限,我们无需编写一行代码,甚至连拖拉拽这种操作都可以抛诸脑后。只需通过与 Cursor 进行自然语言对话,用清晰的文字描述自己的应用需求,就能轻松创建出一个完整的低代码应用。
1764 8
|
缓存 IDE Java
SpringBoot入门(7)- 配置热部署devtools工具
SpringBoot入门(7)- 配置热部署devtools工具
1095 2
 SpringBoot入门(7)- 配置热部署devtools工具
|
安全 搜索推荐 JavaScript
全员学习低代码,一汽大众领跑数智化转型背后的秘密|《102个开发者故事》第七期
500位低代码开发者,90%来自一线,低代码开发在一汽-大众百花齐放。
1732 1
全员学习低代码,一汽大众领跑数智化转型背后的秘密|《102个开发者故事》第七期
【分享】宜搭抽屉内嵌入表单,表单提交后自动隐藏抽屉
抽屉内嵌入表单,表单提交后自动隐藏抽屉
943 1

热门文章

最新文章