当前位置：首页 > 前端教程

elementui评分

2026-03-06 08:07:17前端教程

使用 Element UI 的评分组件

Element UI 提供了 el-rate 组件用于评分功能，支持自定义图标、颜色、大小等属性。以下是一个基本示例：

<template>
  <el-rate v-model="value" />
</template>

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

自定义评分图标和颜色

通过 icon-classes 和 colors 属性可以自定义评分的图标和颜色：

<el-rate
  v-model="value"
  :icon-classes="['icon-star-on', 'icon-star-on', 'icon-star-on']"
  :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
/>

设置最大分值

使用 max 属性可以设置评分的最大分值，默认为 5：

<el-rate v-model="value" :max="10" />

禁用评分

通过 disabled 属性可以禁用评分组件：

elementui评分

<el-rate v-model="value" disabled />

半星评分

设置 allow-half 属性可以启用半星评分：

<el-rate v-model="value" allow-half />

显示辅助文字

使用 show-text 和 texts 属性可以显示辅助文字：

elementui评分

<el-rate
  v-model="value"
  show-text
  :texts="['很差', '差', '一般', '好', '很好']"
/>

事件监听

el-rate 组件提供了 change 事件，可以在评分变化时触发：

<el-rate v-model="value" @change="handleChange" />

<script>
export default {
  methods: {
    handleChange(value) {
      console.log('评分变化:', value)
    }
  }
}
</script>

自定义样式

可以通过 CSS 覆盖默认样式来自定义评分组件的外观：

.el-rate__icon {
  font-size: 20px;
  margin-right: 5px;
}

结合表单使用

el-rate 可以与其他表单组件一起使用，例如在 el-form 中：

<el-form :model="form" label-width="80px">
  <el-form-item label="评分">
    <el-rate v-model="form.rate" />
  </el-form-item>
</el-form>

<script>
export default {
  data() {
    return {
      form: {
        rate: 0
      }
    }
  }
}
</script>