如何用Element UI的el-rate组件实现百分制评分显示？

Element UI 的 el-rate 组件默认是基于星级的评分组件，通常用于 5 星或 10 星评分系统。如果你希望使用 el-rate 组件来实现百分制评分显示，可以通过以下步骤进行自定义：

1. 设置 el-rate 组件的最大值

首先，将 el-rate 组件的 max 属性设置为 100，这样评分范围就是 0 到 100。

<template>
  <el-rate v-model="score" :max="100"></el-rate>
</template>

<script>
export default {
  data() {
    return {
      score: 0
    };
  }
};
</script>

2. 自定义评分显示

el-rate 组件允许你通过 show-score 属性来显示评分值。你可以通过 score-template 属性来自定义评分的显示格式。

<template>
  <el-rate
    v-model="score"
    :max="100"
    show-score
    :score-template="`${score}%`"
  ></el-rate>
</template>

<script>
export default {
  data() {
    return {
      score: 0
    };
  }
};
</script>

3. 自定义图标和颜色

如果你希望进一步自定义 el-rate 组件的外观，可以使用 icon-classes 和 colors 属性来设置不同评分区间的图标和颜色。

<template>
  <el-rate
    v-model="score"
    :max="100"
    show-score
    :score-template="`${score}%`"
    :icon-classes="iconClasses"
    :colors="colors"
  ></el-rate>
</template>

<script>
export default {
  data() {
    return {
      score: 0,
      iconClasses: ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'],
      colors: ['#99A9BF', '#F7BA2A', '#FF9900']
    };
  }
};
</script>

4. 处理评分变化

你可以通过监听 change 事件来处理评分变化。

<template>
  <el-rate
    v-model="score"
    :max="100"
    show-score
    :score-template="`${score}%`"
    @change="handleScoreChange"
  ></el-rate>
</template>

<script>
export default {
  data() {
    return {
      score: 0
    };
  },
  methods: {
    handleScoreChange(score) {
      console.log('当前评分:', score);
    }
  }
};
</script>

5. 完整示例

以下是一个完整的示例，展示了如何使用 el-rate 组件实现百分制评分显示：

<template>
  <div>
    <el-rate
      v-model="score"
      :max="100"
      show-score
      :score-template="`${score}%`"
      :icon-classes="iconClasses"
      :colors="colors"
      @change="handleScoreChange"
    ></el-rate>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 0,
      iconClasses: ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'],
      colors: ['#99A9BF', '#F7BA2A', '#FF9900']
    };
  },
  methods: {
    handleScoreChange(score) {
      console.log('当前评分:', score);
    }
  }
};
</script>

<style scoped>
/* 自定义样式 */
</style>

通过以上步骤，你可以使用 Element UI 的 el-rate 组件实现百分制评分显示，并根据需要进行自定义。