如何修改el-select 的边框颜色

在Element UI的`el-select`组件中，如果你想动态修改其边框颜色，你需要直接操作DOM元素或者使用Vue的计算属性或watch特性来监听变化并更新样式。下面是一个基本的例子，假设我们有一个`selectedColor`数据驱动的属性来控制边框颜色：

首先，创建一个计算属性或在watch中定义方法来检查当前选中的值并更新边框颜色：

data() {
  return {
    selectedColor: '',
    // 其他el-select的数据...
  };
},
computed: {
  borderedColor() {
    if (this.someCondition) { // 替换为你的条件判断逻辑
      return 'red'; // 红色边框
    } else {
      return ''; // 默认无边框或其它颜色
    }
  },
},
watch: {
  'someProperty': {
    handler(newVal) {
      this.$nextTick(() => {
        this.$refs.selectEl.style.borderColor = this.borderedColor; // 更新边框颜色
      });
    },
    deep: true,
  },
},
methods: {
  someMethodThatChangesSelection() {
    // 当选中值变化时，这里触发
    // 这里假设`someProperty`是选中的值
    this.someProperty = ...;
  },
},

在HTML模板中，确保将`ref`属性添加到`el-select`上以便后续引用：

<el-select ref="selectEl" v-model="someProperty" @input="someMethodThatChangesSelection">
  <!-- ... -->
</el-select>

这样，每当`someProperty`（或触发`someMethodThatChangesSelection`的其他原因）发生变化时，`borderColor`就会根据`borderedColor`计算的结果来调整。