elementUI select组件value值注意事项详解

下面我就为大家详细介绍一下关于 ElementUI Select 组件 value 值的注意事项。

问题出现情况

在使用 ElementUI Select 组件的时候，由于其拥有多种选择模式，可能会出现一些 value 值的问题。当我们使用可搜索的 select 时，会发现在搜索后选中某个选项后，value 值并不是我们所想要的值，而是一个对应着索引的数值。

下面就是一些具体的例子：

例子一：

在搜索了"黄"后，我们选择了"黄浦区"，而 log 出来的 value 却是1，和我们期望的“黄浦区”不一致。

<template>
  <div>
    <el-select v-model="selectValue" filterable @change="handleChange">
      <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <div>{{ selectValue }}</div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selectValue: '',
        options: [
          {
            value: 'a',
            label: '徐汇区'
          },
          {
            value: 'b',
            label: '黄浦区'
          },
          {
            value: 'c',
            label: '闵行区'
          },
        ]
      }
    },
    methods: {
      handleChange(val) {
        console.log(val) // 输出1
      },
    }
  }
</script>

例子二：

在一个多选的情况下，我们选择多个选项后呼出弹窗，再次勾选其他选项后取消，这个选项就再也删不掉了。

<template>
  <div>
    <el-select v-model="selectValue" multiple filterable @remove-tag="handleRemoveTag" @visible-change="handleVisibleChange">
      <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <div v-for="(value,index) in selectValue" :key="index">{{ value }}</div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selectValue: [],
        options: [
          {
            value: 'a',
            label: '徐汇区'
          },
          {
            value: 'b',
            label: '黄浦区'
          },
          {
            value: 'c',
            label: '闵行区'
          },
        ]
      }
    },
    methods: {
      handleRemoveTag(tag) {
        const index = this.selectValue.indexOf(tag);
        if (index !== -1) {
          this.selectValue.splice(index, 1);
        }
      },
      handleVisibleChange(visible) {
        if (!visible) {
          // 在弹框中没有勾选的value值加回来
          // 假设是下标为3和下标为4未被加入
          this.selectValue.push('d', 'e');
        }
      },
    }
  }
</script>

解决方案

为了解决上面的问题，我们需要对 Select 组件的 value 值做出相关操作。经过调查和测试，我们找到了两种解决办法:

方案一：

通过给每个选项增加唯一的 key 值，再通过监听 select 组件的 @change 事件获取当前选项的值即可。可以如下修改例子一中的代码：

<template>
  <div>
    <el-select v-model="selectValue" filterable @change="handleChange">
      <el-option v-for="(item,index) in options" :key="`${item.value}-${index}`" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <div>{{ selectValue }}</div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selectValue: '',
        options: [
          {
            value: 'a',
            label: '徐汇区'
          },
          {
            value: 'b',
            label: '黄浦区'
          },
          {
            value: 'c',
            label: '闵行区'
          },
        ]
      }
    },
    methods: {
      handleChange(val) {
        console.log(val) // 输出"b"，与我们的期望一致
      },
    }
  }
</script>

方案二：

通过监听 select 组件的 @remove-tag 事件，在事件中更新 selectValue 值即可。可以如下修改例子二中的代码：

<template>
  <div>
    <el-select v-model="selectValue" multiple filterable @remove-tag="handleRemoveTag" @visible-change="handleVisibleChange">
      <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <div v-for="(value,index) in selectValue" :key="index">{{ value }}</div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selectValue: [],
        options: [
          {
            value: 'a',
            label: '徐汇区'
          },
          {
            value: 'b',
            label: '黄浦区'
          },
          {
            value: 'c',
            label: '闵行区'
          },
        ]
      }
    },
    methods: {
      handleRemoveTag(tag) {
        const index = this.selectValue.indexOf(tag);
        if (index !== -1) {
          this.selectValue.splice(index, 1);
        }
      },
      handleVisibleChange(visible) {
        if (!visible) {
          // 在弹框中没有勾选的value值加回来
          // 假设是下标为3和下标为4未被加入
          this.selectValue.push('d', 'e');
          // 更新 selectValue 值
          this.$nextTick(() => {
            this.$refs.select.setValue(this.selectValue)
          })
        }
      },
    }
  }
</script>

总结

通过以上的两种解决方案，我们成功解决了在 ElementUI Select 组件中 value 值的问题。同时，我们应该养成好的编程习惯，为每个选项增加唯一的 key 值，并且在监听事件的时候对每个事件进行处理，这样才能保证整个应用的代码质量和性能。