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

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

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

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);
  });
}
目录
相关文章
|
9月前
|
人工智能 Rust 运维
这个神器让你白嫖ClaudeOpus 4.5,Gemini 3!还能接Claude Code等任意平台
加我进AI讨论学习群,公众号右下角“联系方式”文末有老金的 开源知识库地址·全免费
11109 22
|
人工智能 自然语言处理 JavaScript
宜搭上新,DeepSeek 插件来了!
钉钉宜搭近日上线了DeepSeek插件,无需编写复杂代码,普通用户也能轻松调用强大的AI大模型能力。安装后,平台新增「AI生成」组件,支持创意内容生成、JS代码编译、工作汇报等场景,大幅提升工作效率。快来体验这一高效智能的办公方式吧!
3304 9
|
人工智能 搜索推荐 前端开发
OpenDeepSearch:搜索引擎革命!这个开源深度搜索工具让AI代理直接读懂网页,复杂问题一键拆解
OpenDeepSearch是基于开源推理模型的深度搜索工具,通过语义重排和多源整合优化检索效果,支持与AI代理无缝集成,提供快速和专业两种搜索模式。
1050 10
OpenDeepSearch:搜索引擎革命!这个开源深度搜索工具让AI代理直接读懂网页,复杂问题一键拆解
|
人工智能 安全 搜索推荐
宜搭AIOA:AI+低代码重构OA生态,打通人财物事数据流,解锁办公效能新高度
AIOA协同办公解决方案基于钉钉+低代码+AI构建,以钉钉为底座,提供快速迭代的OA应用。方案内置三大主线应用(销售、采购、财务费用闭环),支持独立或关联使用,并预置高频OA场景如固定资产、车辆管理等,实现开箱即用。面对传统办公模式挑战,AIOA从单一到协同、人工到智能、人治到数治、分散到聚合全面升级。工作空间角色化、流程管理一体化、专属AI助理智能化,覆盖营销、采购、费控、资产管理等全生命周期,助力企业高效数字化转型。
1275 14
|
敏捷开发 存储 SQL
Quick BI × 宜搭:低代码敏捷开发与专业数据分析的完美融合,驱动企业数字化转型新范式
钉钉低代码平台宜搭与瓴羊QuickBI深度融合,提供前端敏捷构建+后端智能决策的解决方案。通过无缝对接的数据收集与分析、一站式数据分析及报表嵌入等功能,实现业务与数据双重赋能。
1189 3
|
存储 人工智能 TensorFlow
你的旧电脑还跑得动AI吗?ToDesk云电脑/青椒云/顺网云算力支持实测报告
随着AI大模型的崛起及广泛应用,旧电脑显示出了硬伤,硬件配置方面,老旧的 CPU、GPU 性能不足,运算速度缓慢,导致 AI 模型训练和推理耗时极长。内存与存储有限,无法承载大型 AI 数据集和复杂模型。散热不佳,运行 AI 任务时易过热死机。且旧电脑可能不兼容新的 AI 框架与工具,软件更新困难。这使得用户在利用旧电脑探索 AI 时,体验大打折扣,而 ToDesk云电脑、青椒云、顺网云等或许能为解决这些问题带来新契机。今天就来实测一下常用的ToDesk云电脑/青椒云/顺网云,博主将从功能、优缺点等方面为你深度剖析这几款云电脑,帮你选出最适合的那一款!🏆
1672 5
|
人工智能 自然语言处理 JavaScript
宜搭上线 DeepSeek Chat 页面模板,一键启用 DS 对话
当低代码平台与 AI 技术相遇,二者的融合为企业带来了更多的创新空间和发展机遇。这种融合不仅能够进一步简化开发流程,还能为应用赋予更强大的智能化能力。在这样的背景下,宜搭低代码平台陆续上线了 DeepSeek 插件、DeepSeek 连接器等工具,今天,更是推出了「DeepSeek Chat」页面模板,方便大家一键启用 DS 对话能力。
1860 6
|
缓存 IDE Java
SpringBoot入门(7)- 配置热部署devtools工具
SpringBoot入门(7)- 配置热部署devtools工具
1164 2
 SpringBoot入门(7)- 配置热部署devtools工具
【分享】宜搭抽屉内嵌入表单,表单提交后自动隐藏抽屉
抽屉内嵌入表单,表单提交后自动隐藏抽屉
1002 1
|
数据管理
产品更新|子表单/关联表单、数据导入导出、版本权益等多项能力升级!
本期功能更新已全量发布,可直接在宜搭内体验。
1266 2
产品更新|子表单/关联表单、数据导入导出、版本权益等多项能力升级!