el-select 下拉框选择的值大于32不满足要求， 边框变红色

`el-select` 是 Element UI 库中的下拉框组件，当用户从选项中选择的值不符合特定条件时，比如值大于32，你可以通过自定义验证函数并在 `el-select` 的 `filterOption` 和 `clearable` 属性配合使用来实现这个效果。

首先，在你的 Vue 组件里，添加一个 computed 或者 watch 来检查选中的值，如果大于 32，则返回 `false` 表示该值不合法：

<template>
  <el-select v-model="selectedValue" :filter-option="customFilter">
    <!-- ... -->
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
    };
  },
  computed: {
    isInvalidValue() {
      return this.selectedValue > 32;
    },
  },
  methods: {
    customFilter(value) {
      if (this.isInvalidValue) {
        // 如果值不合法，阻止显示并设置边框颜色
        value.disabled = true;
        value.style.borderColor = 'red';
      } else {
        value.disabled = false;
        // 正常情况，恢复默认样式
        value.style.borderColor = '';
      }
      return this.isInvalidValue ? undefined : value;
    },
  },
  watch: {
    selectedValue(newVal, oldVal) {
      this.customFilter(newVal);
    },
  },
};
</script>

在这个例子中，当你选择一个大于 32 的值时，下拉框选项会变成灰色并高亮显示，同时边框变为红色。用户无法继续选择这个非法值，直到他们更改到一个有效的值。