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

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

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

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):任何时刻,任何用户一旦读到某个数据在某次更新后的值,这个用户不会再读到比这个值更旧的值。
1960 0
|
9月前
|
云安全 人工智能 自然语言处理
产业升级丨负责任的 AI,从 AI 治理和安全能力构建开始
未来,在 AI 与人类和谐共生的世界里,AI 不仅是强大的工具,更是负责任的伙伴。
|
人工智能 自然语言处理 JavaScript
宜搭上新,DeepSeek 插件来了!
钉钉宜搭近日上线了DeepSeek插件,无需编写复杂代码,普通用户也能轻松调用强大的AI大模型能力。安装后,平台新增「AI生成」组件,支持创意内容生成、JS代码编译、工作汇报等场景,大幅提升工作效率。快来体验这一高效智能的办公方式吧!
3214 9
|
人工智能 搜索推荐 前端开发
OpenDeepSearch:搜索引擎革命!这个开源深度搜索工具让AI代理直接读懂网页,复杂问题一键拆解
OpenDeepSearch是基于开源推理模型的深度搜索工具,通过语义重排和多源整合优化检索效果,支持与AI代理无缝集成,提供快速和专业两种搜索模式。
996 10
OpenDeepSearch:搜索引擎革命!这个开源深度搜索工具让AI代理直接读懂网页,复杂问题一键拆解
|
存储 人工智能 安全
业财一体 ERP 数智化管理系统
业财一体 ERP 数智化管理系统是基于钉钉 + 钉钉低代码构建,作为企业管理体系数字化转型升级的驱动器,目标是将业务管理与财务管理深度融合,帮助企业构建一个集成、高效、智能的管理体系。旨在通过先进的信息技术,打通各业务模块数据传递链路,进行业务财务的一体化管理,采取智能化手段大幅度提升工作效率,逐步实现企业数字化转型和智能化改造。
859 12
|
人工智能 自然语言处理 JavaScript
宜搭上线 DeepSeek Chat 页面模板,一键启用 DS 对话
当低代码平台与 AI 技术相遇,二者的融合为企业带来了更多的创新空间和发展机遇。这种融合不仅能够进一步简化开发流程,还能为应用赋予更强大的智能化能力。在这样的背景下,宜搭低代码平台陆续上线了 DeepSeek 插件、DeepSeek 连接器等工具,今天,更是推出了「DeepSeek Chat」页面模板,方便大家一键启用 DS 对话能力。
1746 6
|
缓存 IDE Java
SpringBoot入门(7)- 配置热部署devtools工具
SpringBoot入门(7)- 配置热部署devtools工具
1113 2
 SpringBoot入门(7)- 配置热部署devtools工具
|
安全 搜索推荐 JavaScript
全员学习低代码,一汽大众领跑数智化转型背后的秘密|《102个开发者故事》第七期
500位低代码开发者,90%来自一线,低代码开发在一汽-大众百花齐放。
1758 1
全员学习低代码,一汽大众领跑数智化转型背后的秘密|《102个开发者故事》第七期
【分享】宜搭抽屉内嵌入表单,表单提交后自动隐藏抽屉
抽屉内嵌入表单,表单提交后自动隐藏抽屉
956 1

热门文章

最新文章