Vue3中针对element下拉select可多选时（ multiple）添加校验一进页面就触发校验bug

在Vue3中，当使用Element UI的`el-select`组件作为多选（multiple）下拉选择时，并且需要在页面加载时立即对用户的选择进行校验，可能会遇到“一进页面就触发校验”的bug。这通常是因为你可能在组件的初始化阶段（如`mounted()`钩子）直接对值进行了校验，而此时下拉框可能还没有获取到用户的实际选择。

解决这个问题的一般做法有：

1. **延迟验证**：确保校验是在用户交互（如改变选择、点击提交按钮等）后才触发。可以在`watch`或自定义事件（如`input`或`change`）中监听选中的值变化，然后进行验证。

<template>
  <el-select v-model="selectedValues" @input="validateSelection" multiple></el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValues: [],
    };
  },
  methods: {
    validateSelection() {
      // 这里可以编写你的校验逻辑
      if (/* 校验条件 */) {
        this.$emit('valid', true); // 如果通过，触发父组件的校验回调
      } else {
        this.$emit('invalid', false); // 否则触发错误处理
      }
    },
  },
};
</script>

2. **计算属性**：你可以创建一个计算属性来存储校验后的结果，而不是直接操作数据模型，这样可以在渲染时自动同步。

3. **使用条件渲染**：如果某些校验依赖于特定条件，可以先检查这个条件是否满足，再进行后续操作。

<template>
  <div v-if="canValidate">
    <!-- 下拉选择和校验逻辑 -->
  </div>
</template>

<script>
export default {
  computed: {
    canValidate() {
      return Array.isArray(this.selectedValues) && this.selectedValues.length > 0; // 检查是否已选择任何选项
    },
  },
  // ...其他代码...
};
</script>