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

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

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

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);
  });
}
目录
相关文章
|
10月前
|
人工智能 Rust 运维
这个神器让你白嫖ClaudeOpus 4.5,Gemini 3!还能接Claude Code等任意平台
加我进AI讨论学习群,公众号右下角“联系方式”文末有老金的 开源知识库地址·全免费
11248 22
|
11月前
|
云安全 人工智能 自然语言处理
产业升级丨负责任的 AI,从 AI 治理和安全能力构建开始
未来,在 AI 与人类和谐共生的世界里,AI 不仅是强大的工具,更是负责任的伙伴。
|
人工智能 自然语言处理 JavaScript
宜搭上新,DeepSeek 插件来了!
钉钉宜搭近日上线了DeepSeek插件,无需编写复杂代码,普通用户也能轻松调用强大的AI大模型能力。安装后,平台新增「AI生成」组件,支持创意内容生成、JS代码编译、工作汇报等场景,大幅提升工作效率。快来体验这一高效智能的办公方式吧!
3374 9
|
人工智能 搜索推荐 前端开发
OpenDeepSearch:搜索引擎革命!这个开源深度搜索工具让AI代理直接读懂网页,复杂问题一键拆解
OpenDeepSearch是基于开源推理模型的深度搜索工具,通过语义重排和多源整合优化检索效果,支持与AI代理无缝集成,提供快速和专业两种搜索模式。
1077 10
OpenDeepSearch:搜索引擎革命!这个开源深度搜索工具让AI代理直接读懂网页,复杂问题一键拆解
|
存储 人工智能 缓存
全新「宜搭出海版」,跨境业务一搭搞定!
在全球化竞争中,中国出海企业面临高增长与抗风险的双重挑战。宜搭基于低代码平台推出「宜搭出海版」,专注解决跨境业务的核心痛点。提供15种语言+AI翻译、全球文件速传、国际化时区协同、全球地址定位、国际化邮箱、货币支持及离线能力等功能,助力企业实现高效、敏捷的全球业务拓展。版本包括面向中国出海企业的“宜搭出海版”和面向海外客户的“宜搭国际版”。
1136 17
|
敏捷开发 存储 SQL
Quick BI × 宜搭:低代码敏捷开发与专业数据分析的完美融合,驱动企业数字化转型新范式
钉钉低代码平台宜搭与瓴羊QuickBI深度融合,提供前端敏捷构建+后端智能决策的解决方案。通过无缝对接的数据收集与分析、一站式数据分析及报表嵌入等功能,实现业务与数据双重赋能。
1284 3
|
存储 人工智能 TensorFlow
你的旧电脑还跑得动AI吗?ToDesk云电脑/青椒云/顺网云算力支持实测报告
随着AI大模型的崛起及广泛应用,旧电脑显示出了硬伤,硬件配置方面,老旧的 CPU、GPU 性能不足,运算速度缓慢,导致 AI 模型训练和推理耗时极长。内存与存储有限,无法承载大型 AI 数据集和复杂模型。散热不佳,运行 AI 任务时易过热死机。且旧电脑可能不兼容新的 AI 框架与工具,软件更新困难。这使得用户在利用旧电脑探索 AI 时,体验大打折扣,而 ToDesk云电脑、青椒云、顺网云等或许能为解决这些问题带来新契机。今天就来实测一下常用的ToDesk云电脑/青椒云/顺网云,博主将从功能、优缺点等方面为你深度剖析这几款云电脑,帮你选出最适合的那一款!🏆
1763 5
|
人工智能 自然语言处理 JavaScript
宜搭上线 DeepSeek Chat 页面模板,一键启用 DS 对话
当低代码平台与 AI 技术相遇,二者的融合为企业带来了更多的创新空间和发展机遇。这种融合不仅能够进一步简化开发流程,还能为应用赋予更强大的智能化能力。在这样的背景下,宜搭低代码平台陆续上线了 DeepSeek 插件、DeepSeek 连接器等工具,今天,更是推出了「DeepSeek Chat」页面模板,方便大家一键启用 DS 对话能力。
1937 6
|
缓存 IDE Java
SpringBoot入门(7)- 配置热部署devtools工具
SpringBoot入门(7)- 配置热部署devtools工具
1189 2
 SpringBoot入门(7)- 配置热部署devtools工具
【分享】宜搭抽屉内嵌入表单,表单提交后自动隐藏抽屉
抽屉内嵌入表单,表单提交后自动隐藏抽屉
1020 1