Element UI评分组件el-rate的百分制显示技巧
Element UI的el-rate组件默认提供五星评分，如何将其转换为百分制显示（每半星代表10分）呢？本文将详细讲解如何巧妙利用el-rate组件及其事件监听机制实现这一功能。
直接修改max值、show-text和show-score属性并不能直接实现百分制显示，因为texts属性只能接受长度为5的数组。这是因为el-rate组件的设计初衷是基于五分制评分。
简单方案：利用半星评分
一个简单的解决方法是启用allow-half属性，允许半星评分。此时，每颗星代表20分，半颗星代表10分。您可以直接将获取到的评分值乘以20，转换为百分制分数进行显示。这种方法简单快捷，但需要在前端或后端进行分数转换。
高级方案：动态百分制显示
如果需要在鼠标悬停在星星上时动态显示百分制分数，则需要更精细的处理。由于el-rate组件本身不支持自定义插槽来直接修改分数显示，我们需要监听el-rate组件的@mousemove事件（需使用.native修饰符）。通过该事件，我们可以获取当前评分值，将其乘以20，并动态更新百分制分数显示。同时，需要开启show-score属性来获取评分值。为了提升用户体验，建议添加防抖或节流功能，避免频繁计算和更新，影响页面性能。
最佳实践：事件监听而非修改源码
直接修改el-rate组件源码并非推荐的做法。通过事件监听和计算的方式，更符合组件的设计理念，也更易于维护和升级。这种方法充分利用了组件提供的事件机制，在不修改源码的情况下实现了所需功能，保持了代码的整洁性和可维护性。
