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

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

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

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);
  });
}
目录
相关文章
|
2月前
|
前端开发
关于宜搭轻享版产品调整及升级优惠活动的通知
钉钉宜搭拟于2026年起逐步退出轻享版业务,1月1日起停止新购,4月1日起停止续约。老用户可享专业版升级优惠,仅需补差价40%,应用数据无缝迁移,无功能损失,助力低代码能力升级。
962 3
|
11月前
|
人工智能 前端开发 JavaScript
纯干货!如何用Cursor+宜搭,3天完成三周开发量(附超详细视频教学)
Cursor是热门代码编辑器之一,通过与宜搭(Yida)结合,提供了强大的低代码页面和自定义组件生成能力。方案利用Claude模型的代码生成能力及MCP支持,大幅提升开发效率。开发者可通过Cursor连接宜搭表单设计器或自定义组件设计器,实现React源码的生成与同步,并支持二次编辑。现有功能涵盖文本、数字、图片、链接等多种字段类型,以及属性面板配置、JS代码生成等。
2199 83
|
10月前
|
敏捷开发 存储 SQL
Quick BI × 宜搭:低代码敏捷开发与专业数据分析的完美融合,驱动企业数字化转型新范式
钉钉低代码平台宜搭与瓴羊QuickBI深度融合,提供前端敏捷构建+后端智能决策的解决方案。通过无缝对接的数据收集与分析、一站式数据分析及报表嵌入等功能,实现业务与数据双重赋能。
667 3
|
12月前
|
人工智能 JavaScript 搜索推荐
宜搭融合 DeepSeek R1 满血版!手把手教你玩转低代码 AI 产品
AI技术的迅猛发展,特别是DeepSeek的推出,为企业带来了前所未有的智能化体验。当低代码平台与AI技术结合时,迸发出丰富的应用场景。本文详细介绍如何通过宜搭平台使用DeepSeek,涵盖网页版、AI助理版、AI生成组件、连接器等功能,帮助用户轻松实现智能化业务系统。
1826 7
宜搭融合 DeepSeek R1 满血版!手把手教你玩转低代码 AI 产品
|
12月前
|
人工智能 自然语言处理 数据可视化
Cursor 为低代码加速,AI 生成应用新体验!
通过连接 Cursor,打破了传统低代码开发的局限,我们无需编写一行代码,甚至连拖拉拽这种操作都可以抛诸脑后。只需通过与 Cursor 进行自然语言对话,用清晰的文字描述自己的应用需求,就能轻松创建出一个完整的低代码应用。
1616 8
|
12月前
|
存储 人工智能 安全
业财一体 ERP 数智化管理系统
业财一体 ERP 数智化管理系统是基于钉钉 + 钉钉低代码构建,作为企业管理体系数字化转型升级的驱动器,目标是将业务管理与财务管理深度融合,帮助企业构建一个集成、高效、智能的管理体系。旨在通过先进的信息技术,打通各业务模块数据传递链路,进行业务财务的一体化管理,采取智能化手段大幅度提升工作效率,逐步实现企业数字化转型和智能化改造。
617 12
|
人工智能 自然语言处理 数据挖掘
产品更新|宜搭AI 新增「智能数据分析」「智能表单」两项功能!
「宜搭AI」开放新一期功能:智能数据分析、智能表单,已支持在宜搭网页端使用体验。
968 0
产品更新|宜搭AI 新增「智能数据分析」「智能表单」两项功能!
【分享】宜搭抽屉内嵌入表单,表单提交后自动隐藏抽屉
抽屉内嵌入表单,表单提交后自动隐藏抽屉
828 1
|
存储 安全 搜索推荐
宜搭版本调整通知(更新)
宜搭一直致力于为用户提供更优质的使用体验。为了更好地满足广大用户需求,宜搭将于2023年7月3日进行版本调整。
13175 3
宜搭版本调整通知(更新)