ElementUI Rate 评分-CSDN博客

一、概述

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

效果如下：