下面是未开启颜色区别，无法直观区别出哪些地方有剩余车位
下面是用代码进行颜色区分，能立即展示出当前哪些地区还有剩余车位。
绿色代表有车位，红色代表没车位.
下面介绍实现方法：
1. 打开组件的彩色选项
2. 在配置组件的弹层变化事件
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); }); }
