关于element-plus Rate 评分组件的一个问题记录

各位家人们，给大家汇报一下近期在工作中遇到的一个小问题，还请大家来探讨探讨，有没有更加合适方案来实现如下的功能。

今天早上，突然接到任务说服务列表评价（使用element-plus # Rate 评分组件实现）的值不能有那么多小数点

遂打开代码一调试，发现后台接口传过来的数据将评分属性没有在后台进行小数点转换，而且前台直接对该值进行循环展示，如果多个人进行评价，列表只展示这几个人平均值，很容易出现4.3365,2.6653这样的值，这不行，这太不美观了，转念一想，这简单，直接对值进行前端toFixed处理完事，可是问题来了，大家看看这个组件如何进行读值操作

<el-rate v-model="value1" />

使用v-model进行读值，可想而知在这里面无法书写函数，上网找了一大堆资料无果，竟然想不到一个特别简便的方法；当然前端获取到列表list可以直接进行操作，但是太懒了，实在不想多写一行代码，想着有没有更加简便的方法直接在v-model中进行操作，思来想去，算了，还是借助高科技。。。

gpt给出了完整的方案：感觉很不错，大家可以一起讨论讨论：

  <div v-for="(item, index) in items" :key="index">
    <el-rate
      v-model="formattedScores[index]"
      disabled
      show-score
      text-color="#ff9900"
      size="small"
    >
    </el-rate>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const items = ref([
      { score: 3.456 },
      { score: 4.234 },
      { score: 2.897 }
    ]);

    const formattedScores = computed({
      get() {
        // 保证 score 保留两位小数
        return items.value.map(item => Number(item.score.toFixed(2)));
      },
      set(newScores) {
        // 当用户更改分数时，更新 item.score，并确保保留两位小数
        newScores.forEach((score, index) => {
          items.value[index].score = Number(score.toFixed(2));
        });
      }
    });

    return {
      items,
      formattedScores
    };
  }
};
</script>

GPT 认为此处的v-model需要进行双向绑定操作，故使用set和get方法；经过我的提示，此处只读不需要进行双向绑定；然后它又给出新的方案：

// 只读计算属性，只负责格式化数据 
const formattedScores = computed(() => items.value.map(item => Number(item.score.toFixed(2))) );

完美解决上述问题，多年编程实在是技艺不精湛，一看都懂，使用中却记不起来，各位家人们，你们有更好的解决方案吗？