ElementUI Rate 评分

最新推荐文章于 2025-09-24 12:08:57 发布

原创最新推荐文章于 2025-09-24 12:08:57 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java #python #vue #js #机器学习

本文介绍了如何在Element UI的Rate评分组件中自定义辅助文字。通过设置`texts`属性，我们可以将默认的评分文字['极差','失望','一般','满意','惊喜']替换为['差','一般','好','非常好','非常棒']，实现更符合项目需求的评分展示。示例代码展示了在Vue.js中应用这一特性的方法。

一、概述

Rate 评分组件，官方链接：https://element.eleme.cn/#/zh-CN/component/rate

二、辅助文字

用辅助文字直接地表达对应分数

test.vue

<template>
  <div style="width: 20%">
    <el-rate
      v-model="value"
      show-text>
    </el-rate>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: null
      }
    },
    methods: {
    },
  }
</script>

<style scoped>

</style>

View Code

效果如下：

在el-rate中有默认的辅助文字['极差', '失望', '一般', '满意', '惊喜']，如果我们想改成更酷的文字，我们需要自定义辅助文字

增加texts属性，完整代码如下：

<template>
  <div style="width: 20%">
    <el-rate
      v-model="value"
      :texts="texts"
      show-text>
    </el-rate>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        texts:['差','一般','好','非常好','非常棒'],
        value: null
      }
    },
    methods: {
    },
  }
</script>

<style scoped>

</style>

View Code

效果如下：