巧用v-model对象绑定和value-key属性解决element-ui中select组件重置问题

2023-11-11 07:38:52

对于下拉框组件，当需要使用options里面其他属性的时候，v-model绑定单个值无法解决需求的时候，需要绑定成对象。但是，在el-select添加value-key="id"属性，el-option添加disabled属性后，再次点击el-select，将无法重新选择。

发生这个问题的原因是，当value-key属性被设置时，v-model绑定的值将不再是单个值，而是一个对象。因此，在重置操作时，无法将v-model绑定的值重置为null，导致无法重新选择。

为了解决这个问题，我们可以使用一个computed属性来处理v-model绑定的值。具体做法如下：

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

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, label: 'Option 1' },
        { id: 2, label: 'Option 2' },
        { id: 3, label: 'Option 3' },
      ],
      selected: null,
    };
  },
  computed: {
    selectedId: {
      get() {
        return this.selected ? this.selected.id : null;
      },
      set(value) {
        this.selected = this.options.find(item => item.id === value);
      },
    },
  },
};
</script>