当前位置：首页 > VUE

vue实现批量select评分

2026-01-21 01:53:24VUE

Vue 实现批量 Select 评分

在 Vue 中实现批量 Select 评分功能，可以通过动态生成评分选项并结合 v-model 实现数据绑定。以下是一个完整的实现示例：

基础实现

创建可复用的评分组件，支持动态选项和批量操作：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index" class="rating-item">
      <label>{{ item.name }}</label>
      <select v-model="item.rating" @change="handleRatingChange(index)">
        <option v-for="n in maxRating" :value="n">{{ n }}</option>
      </select>
    </div>
    <button @click="submitRatings">提交评分</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      maxRating: 5,
      items: [
        { name: '项目1', rating: 0 },
        { name: '项目2', rating: 0 },
        { name: '项目3', rating: 0 }
      ]
    }
  },
  methods: {
    handleRatingChange(index) {
      console.log(`项目 ${index + 1} 评分变更为: ${this.items[index].rating}`)
    },
    submitRatings() {
      console.log('提交的评分:', this.items)
    }
  }
}
</script>

<style>
.rating-item {
  margin-bottom: 15px;
}
select {
  margin-left: 10px;
  padding: 5px;
}
</style>

进阶优化

添加评分验证和自定义选项功能：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index" class="rating-item">
      <label>{{ item.name }}</label>
      <select 
        v-model="item.rating" 
        :class="{ 'error': !isValidRating(item.rating) }"
      >
        <option value="" disabled>请选择评分</option>
        <option v-for="n in maxRating" :value="n">{{ n }}星</option>
      </select>
      <span v-if="!isValidRating(item.rating)" class="error-message">
        请选择有效评分
      </span>
    </div>
    <button :disabled="!allRatingsValid" @click="submitRatings">
      提交评分
    </button>
  </div>
</template>

<script>
export default {
  props: {
    initialItems: {
      type: Array,
      default: () => []
    },
    maxRating: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      items: this.initialItems.map(item => ({
        ...item,
        rating: item.rating || 0
      }))
    }
  },
  computed: {
    allRatingsValid() {
      return this.items.every(item => this.isValidRating(item.rating))
    }
  },
  methods: {
    isValidRating(rating) {
      return rating > 0 && rating <= this.maxRating
    },
    submitRatings() {
      this.$emit('submit', this.items)
    }
  }
}
</script>

<style>
.error {
  border-color: red;
}
.error-message {
  color: red;
  margin-left: 10px;
}
</style>

使用示例

在父组件中使用评分组件：

<template>
  <div>
    <batch-rating 
      :initial-items="products" 
      :max-rating="10"
      @submit="handleSubmit"
    />
  </div>
</template>

<script>
import BatchRating from './BatchRating.vue'

export default {
  components: {
    BatchRating
  },
  data() {
    return {
      products: [
        { name: '产品A', rating: 0 },
        { name: '产品B', rating: 0 },
        { name: '产品C', rating: 0 }
      ]
    }
  },
  methods: {
    handleSubmit(ratings) {
      // 处理提交的评分数据
      console.log('收到的评分:', ratings)
    }
  }
}
</script>