Skip to content

Rate 评分

该组件是低代码平台中用于用户打分或评级的表单项,基于 Element Plus 的 <el-rate> 封装,支持自定义最大分值、半星选择、颜色分段、辅助文字/分数显示,并深度集成表单容器(<el-form>)的数据绑定与校验体系。

基础属性

属性类型说明
最大分值 maxnumber评分总星数(整数,默认为 5
是否支持半选 allowHalfboolean允许用户选择半颗星(如 3.5 分)
低分界限值 lowThresholdnumber小于该值视为“低分”(默认 2
高分界限值 highThresholdnumber大于该值视为“高分”(默认 4
未选中时的颜色 voidColorstring空星(未评分部分)的颜色(如 #C6D1DE
各分段对应的颜色 colorsstring[]最多 3 项,依次对应:低分、中分、高分颜色(如 ['#F7BA2A', '#F7BA2A', '#F7BA2A']
是否显示辅助文字 showTextboolean显示自定义文字描述(如“差”、“一般”、“优秀”)
⚠️ 与“显示分数”互斥
是否显示当前分数 showScoreboolean在右侧显示当前数值(如 4.0
⚠️ 与“辅助文字”互斥
辅助文字的颜色 textColorstring辅助文字的文本颜色(仅当 showText 启用时生效)
辅助文字 textsstring[]最多 3 项,分别对应低、中、高分段的提示文字(如 ['差', '一般', '优秀']
表单项基础配置包含标签宽度、布局控制等通用表单项设置(来自 formItemBaseDefine

🔗 颜色与分段逻辑

  • 评分 ≤ lowThreshold → 使用 colors[0] + texts[0]
  • lowThreshold < 评分 < highThreshold → 使用 colors[1] + texts[1]
  • 评分 ≥ highThreshold → 使用 colors[2] + texts[2]

高级属性

属性类型说明
表单项高级配置包含字段名(prop)、标签文本(label)等核心绑定配置(来自 formItemAdvDefine

事件

事件触发时机说明
change评分值发生变化时返回当前分数(如 43.5