vue实现批量select评分

实现批量 Select 评分功能

在 Vue 中实现批量 Select 评分功能，可以通过动态生成评分组件并绑定数据来实现。以下是一个完整的实现方案：

数据准备

定义评分项数组和评分数据对象：

data() {
  return {
    items: [
      { id: 1, name: '项目A' },
      { id: 2, name: '项目B' },
      { id: 3, name: '项目C' }
    ],
    ratings: {}
  }
}

模板结构

使用 v-for 循环渲染评分项，每个项绑定对应的评分值：

<div v-for="item in items" :key="item.id" class="rating-item">
  <span>{{ item.name }}</span>
  <select v-model="ratings[item.id]" @change="handleRatingChange">
    <option value="">请选择评分</option>
    <option value="1">1分</option>
    <option value="2">2分</option>
    <option value="3">3分</option>
    <option value="4">4分</option>
    <option value="5">5分</option>
  </select>
</div>

事件处理

添加评分变化处理函数：

methods: {
  handleRatingChange() {
    console.log('当前评分:', this.ratings)
  }
}

样式优化

添加基础样式增强用户体验：

.rating-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.rating-item span {
  min-width: 80px;
  display: inline-block;
}
.rating-item select {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

批量提交功能

添加提交按钮处理所有评分：

<button @click="submitRatings" :disabled="!isAllRated">提交评分</button>

计算属性检查是否全部评分完成：

computed: {
  isAllRated() {
    return this.items.every(item => this.ratings[item.id])
  }
}

提交方法实现：

methods: {
  submitRatings() {
    const result = this.items.map(item => ({
      id: item.id,
      rating: this.ratings[item.id]
    }))
    console.log('提交的评分:', result)
  }
}

默认值设置

如果需要设置默认评分，可以在 created 钩子中初始化：

created() {
  this.items.forEach(item => {
    this.$set(this.ratings, item.id, '')
  })
}

响应式注意事项

使用 Vue.set 或 this.$set 确保 ratings 对象的属性是响应式的：

methods: {
  handleRatingChange(item) {
    this.$set(this.ratings, item.id, item.rating)
  }
}

组件化方案

对于更复杂的场景，可以将评分项封装为独立组件：

Vue.component('rating-item', {
  props: ['item'],
  template: `
    <div class="rating-item">
      <span>{{ item.name }}</span>
      <select v-model="rating">
        <option value="">请选择评分</option>
        <option value="1">1分</option>
        <option value="2">2分</option>
        <option value="3">3分</option>
        <option value="4">4分</option>
        <option value="5">5分</option>
      </select>
    </div>
  `,
  data() {
    return {
      rating: ''
    }
  },
  watch: {
    rating(newVal) {
      this.$emit('change', {
        id: this.item.id,
        rating: newVal
      })
    }
  }
})

父组件中使用：

<rating-item 
  v-for="item in items" 
  :key="item.id" 
  :item="item"
  @change="handleRatingChange">
</rating-item>

这种实现方式提供了灵活的批量评分功能，可以根据实际需求调整评分等级、样式和交互逻辑。