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

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

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

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);
  });
}
目录
相关文章
|
缓存 算法 NoSQL
【分布式详解】一致性算法、全局唯一ID、分布式锁、分布式事务、 分布式缓存、分布式任务、分布式会话
分布式系统通过副本控制协议,使得从系统外部读取系统内部各个副本的数据在一定的约束条件下相同,称之为副本一致性(consistency)。副本一致性是针对分布式系统而言的,不是针对某一个副本而言。强一致性(strong consistency):任何时刻任何用户或节点都可以读到最近一次成功更新的副本数据。强一致性是程度最高的一致性要求,也是实践中最难以实现的一致性。单调一致性(monotonic consistency):任何时刻,任何用户一旦读到某个数据在某次更新后的值,这个用户不会再读到比这个值更旧的值。
1985 0
|
8月前
|
人工智能 Rust 运维
这个神器让你白嫖ClaudeOpus 4.5,Gemini 3!还能接Claude Code等任意平台
加我进AI讨论学习群,公众号右下角“联系方式”文末有老金的 开源知识库地址·全免费
10988 22
|
8月前
|
机器学习/深度学习 算法 算法框架/工具
基于yolov8的深度学习水果识别检测系统
在农业现代化与消费升级背景下,基于YOLOv8的水果智能检测系统应运而生。该系统利用计算机视觉技术,实现高效、精准的水果识别与分级,广泛应用于生产、流通与零售环节,显著提升分拣效率、降低人工成本,并推动农业智能化发展。
|
8月前
|
前端开发
关于宜搭轻享版产品调整及升级优惠活动的通知
钉钉宜搭拟于2026年起逐步退出轻享版业务,1月1日起停止新购,4月1日起停止续约。老用户可享专业版升级优惠,仅需补差价40%,应用数据无缝迁移,无功能损失,助力低代码能力升级。
4252 3
2025年阿里云域名备案流程(图文详细教程)
本文详细介绍了2025年阿里云域名备案的全流程,包括注册阿里云账号、企业实名认证、购买服务器、创建域名信息模板、购买域名、域名备案及查询备案号等步骤。通过图文结合的方式,清晰展示了每个环节的操作方法和注意事项,帮助用户顺利完成域名备案。文章强调了域名备案的前提是国内需有一台服务器,并提供了具体配置建议,同时提醒用户注意邮箱验证和短信核验等关键步骤,确保备案顺利通过。
18329 16
|
人工智能 安全 搜索推荐
宜搭AIOA:AI+低代码重构OA生态,打通人财物事数据流,解锁办公效能新高度
AIOA协同办公解决方案基于钉钉+低代码+AI构建,以钉钉为底座,提供快速迭代的OA应用。方案内置三大主线应用(销售、采购、财务费用闭环),支持独立或关联使用,并预置高频OA场景如固定资产、车辆管理等,实现开箱即用。面对传统办公模式挑战,AIOA从单一到协同、人工到智能、人治到数治、分散到聚合全面升级。工作空间角色化、流程管理一体化、专属AI助理智能化,覆盖营销、采购、费控、资产管理等全生命周期,助力企业高效数字化转型。
1209 14
|
数据采集 供应链 安全
中小企业数改方案
本方案旨在推动中小企业数字化转型,落实国家四部门发布的《中小企业数字化赋能专项行动方案(2025—2027年)》。通过政策引导、技术支持和应用实践,帮助中小企业降低转型成本,提升核心竞争力,实现从营销管理、生产管控、质量管理到设备管理等多场景的全面数字化升级。
756 2
中小企业数改方案
|
人工智能 自然语言处理 数据可视化
Cursor 为低代码加速,AI 生成应用新体验!
通过连接 Cursor,打破了传统低代码开发的局限,我们无需编写一行代码,甚至连拖拉拽这种操作都可以抛诸脑后。只需通过与 Cursor 进行自然语言对话,用清晰的文字描述自己的应用需求,就能轻松创建出一个完整的低代码应用。
1802 8
|
人工智能 自然语言处理 搜索推荐
办公方式革新,手把手教你打造超实用 AI 助理
在AI重塑企业办公的时代,钉钉AI助理成为智能化变革的关键工具。通过连接企业知识库,提供智能问答服务,它能高效解答员工的各种问题,提升工作效率与体验。搭建钉钉AI助理需先整理企业知识,登录钉钉创建并个性化设置助理,添加知识文档,确保其稳定运行。这一智能助手不仅能提高沟通效率,还能降低人力成本,助力企业迈向智能化管理。
2193 1