惊天大逆转：Element UI 中 Select 组件禁止展示不存在的值攻略

2023-06-02 17:05:43

解决 Element UI Select 组件展示不存在值的难题

Element UI 中的 Select 组件是前端开发中广泛使用的选择组件，但有时我们可能会遇到这样的问题：当绑定的值不在选项列表中时，它仍然会显示在选择框中。这可能会导致数据展示不准确、数据不一致，甚至用户困惑。本文将深入探讨这个问题并提供两种行之有效的解决方案。

问题根源：数据绑定机制

Element UI 中的 Select 组件使用数据绑定机制将值与选项列表进行关联。当绑定的值不存在于选项列表中时，组件将默认显示该值。这是因为组件的目的是允许用户从提供的一组选项中进行选择，而不在列表中的值本质上并不属于此组。

解决方案 1：使用 v-if 指令隐藏不存在的值

我们可以使用 Vue.js 中的 v-if 指令来有条件地隐藏不存在的值。具体步骤如下：

<el-select v-model="value">
  <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>

const app = new Vue({
  data() {
    return {
      value: '111',
      options: [
        { value: '1', label: '选项 1' },
        { value: '2', label: '选项 2' },
        { value: '3', label: '选项 3' }
      ]
    }
  }
})

在这个示例中，我们使用 v-if 指令检查 value 是否包含在 options 数组中。如果 value 不存在，则 el-select 组件将被隐藏。

解决方案 2：使用 filter 方法过滤不存在的值

另一种解决方法是使用 filter 方法来过滤掉不存在的值。具体步骤如下：

<el-select v-model="value">
  <el-option v-for="option in options | filterBy value" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>

const app = new Vue({
  data() {
    return {
      value: '111',
      options: [
        { value: '1', label: '选项 1' },
        { value: '2', label: '选项 2' },
        { value: '3', label: '选项 3' }
      ]
    }
  }
})