如何用Element UI的el-rate组件实现百分制评分及鼠标悬停显示百分比？

Element UI的el-rate组件默认提供的是五分制的评分能力，在很多业务场景中我们需要将其调整为百分制，同时还需要在鼠标悬停到评分项时显示对应的百分比数值，下面是实现的具体方案。

核心实现思路

要实现百分制评分和悬停显示百分比，核心需要用到el-rate的max属性、show-text属性、texts属性以及format-tooltip方法，通过调整最大评分数量和自定义提示文本的逻辑来完成需求。

1. 基础属性配置

首先我们需要将el-rate的最大评分数量设置为100，这样每个评分项就对应1分，整体就是百分制。同时开启文本显示和自定义提示的能力。

2. 悬停提示自定义

el-rate提供了format-tooltip方法，这个方法会在鼠标悬停到评分项时触发，我们可以在这个方法里返回需要显示的百分比文本，实现悬停显示百分比的效果。

完整实现代码

下面是完整的Vue组件代码示例，包含了百分制评分和鼠标悬停显示百分比的全部逻辑：

<template>
  <div class="rate-demo">
    <h3>百分制评分组件</h3>
    <!-- 配置max为100实现百分制，绑定format-tooltip自定义悬停提示 -->
    <el-rate
      v-model="score"
      :max="100"
      :format-tooltip="formatTooltip"
      show-text
      :texts="scoreTexts"
    ></el-rate>
    <p>当前评分：{{ score }}分</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 绑定评分值，初始为60分
      score: 60,
      // 评分文本数组，这里不需要实际显示文本，所以填充空字符串
      scoreTexts: new Array(100).fill('')
    }
  },
  methods: {
    // 自定义悬停提示内容，返回百分比文本
    formatTooltip(val) {
      return `${val}%`
    }
  }
}
</script>

<style scoped>
.rate-demo {
  padding: 20px;
}
/* 调整评分项的大小，避免100个评分项太挤 */
.rate-demo .el-rate__item {
  width: 12px;
  height: 12px;
  margin-right: 2px;
}
.rate-demo .el-rate__icon {
  font-size: 12px;
}
</style>

代码逻辑说明

• max属性设置为100，让评分组件的总分为100，每个评分项对应1分，实现百分制。
• format-tooltip绑定formatTooltip方法，方法接收当前悬停的评分值作为参数，返回拼接了百分号的字符串，实现悬停显示百分比。
• show-text开启文本显示，texts填充100个空字符串，避免默认显示1到100的数字文本。
• 通过样式调整评分项的大小和间距，让100个评分项可以在页面上合理展示，不会过度拥挤。

注意事项

如果不需要显示100个独立的评分星，也可以将max设置为10，每个评分项对应10分，然后在formatTooltip方法中返回val * 10 + '%'，这样只需要10个评分项就能实现百分制效果，页面展示会更简洁。另外如果需要提交评分到后端，直接取score的值即可，已经是百分制的数值。

Element_UIel-rate百分制评分鼠标悬停显示百分比修改时间：2026-06-24 22:51:27