vue+element开发使用el-select不能回显的处理方案

下面是详细的解释。

背景

在Vue+Element前端开发中，使用el-select组件时，有时我们需要实现对下拉选项的回显功能。但是实际使用中，发现el-select在使用v-model绑定数据进行回显时存在问题，即无法正确地显示默认值。

原因

这是因为在Vue中，父组件在挂载之前会先于子组件执行，导致el-select还没有加载完，所以无法正确地设置默认值。

处理方案

1.通过value-key将选中的值由对象改为字符串类型。

<el-select v-model="value" placeholder="请选择" :value-key="'name'">
  <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select>

在实际使用过程中，需要将value的值由一个对象改为对象中的一个属性值，比如name。这样即可通过设置value-key将选中的值由对象类型变为字符串类型。

2.通过v-if、v-else延迟el-select的加载

<el-select v-if="options.length" v-model="value" placeholder="请选择">
  <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select>
<el-select v-else placeholder="请选择"></el-select>

该方法通过将el-select注入到v-if中，只有在选项列表加载完毕后才会触发el-select的挂载。可以实现正确的回显效果。

需要注意的是，如果选项列表特别长，并不推荐使用此方法，因为这样会影响页面加载速度。

示例说明

1.使用value-key解决el-select回显问题

<template>
  <div>
    <el-select v-model="selected" :multiple="true" :value-key="'name'" placeholder="请选择">
      <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: [{ id: 2, name: '选中的值' }],
      options: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ]
    }
  }
}
</script>

在使用v-model绑定选中的值时，需要将value的值改为选项对象中的一个属性，这里是name，并且在el-select中添加value-key="name"即可。

2.使用v-if、v-else解决el-select回显问题

<template>
  <div>
    <el-select v-if="options.length" v-model="selected" placeholder="请选择">
      <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item"></el-option>
    </el-select>
    <el-select v-else placeholder="请选择"></el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: { id: 2, name: '选中的值' },
      options: []
    }
  },
  mounted() {
    this.options = [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' },
      { id: 3, name: '选项3' }
    ]
  }
}
</script>

在数据加载完成之前，将el-select注入到v-else中，等待数据加载完毕后再注入到v-if中即可。