el-select 数据回显,只显示value不显示lable问题

针对el-select数据回显时只显示value而不显示label的问题，有两种解决方案：

方案一：将options数组中的每个对象中的value和label互换

这种方案的核心思想是将options数组中的每个对象中value和label属性的值互换。比如原来options数组的一个元素是这样的：

{
  value: '1',
  label: '选项1'
}

那么就将它改成这样：

{
  value: '选项1',
  label: '1'
}

这样在el-select的数据回显过程中，显示的就是label属性的值，而不是默认的value属性的值。具体代码示例如下：

<template>
  <el-select v-model="selected" :options="options"></el-select>
</template>

<script>
export default {
  data() {
    return {
      selected: '选项2',
      options: [
        { value: '选项1', label: '1' },
        { value: '选项2', label: '2' },
        { value: '选项3', label: '3' },
      ]
    }
  }
}
</script>

上面的代码中，在el-select组件中绑定了selected和options两个属性，其中options数组中的每个元素都是value和label属性值互换的对象。这样做之后，在el-select的数据回显过程中，就会显示label属性的值，而不是默认的value属性的值。

方案二：使用slot自定义选项项模板

这种方案的核心思想是使用slot自定义选项项的模板，将要显示的内容和el-select的v-model进行绑定。具体代码示例如下：

<template>
  <el-select v-model="selected">
    <template slot="default" slot-scope="{ option }">
      {{ option.label }}
    </template>
    <el-option v-for="option in options" :key="option.value" :value="option.value" :label="option.label"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selected: '2',
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' },
        { value: '3', label: '选项3' },
      ]
    }
  }
}
</script>

上面的代码中，在el-select组件中定义了一个默认的插槽，并在其中定义了对应的模板。在模板中通过slot-scope="{ option }"获取到每个选项项对象，然后使用option.label绑定要显示的数据。这样做之后，在el-select的数据回显过程中，就会显示label属性的值，而不是默认的value属性的值。