vue.js - Element UI el-select 组件 value 正确但 label 不回显问题如何解决？

Question

el-select value值设置的正确，但是回显不显示对应的label；options和value都是从表格数据里面同时拿到的，而且是表格里面偶发性会有一条数据出现这种情况
<el-table-column label="状态" prop="status">

    <template slot-scope="scope">      <el-select v-model="scope.row.status" size="mini" :ref="scope.row.id" @change="onStatusChange(scope.row)">        <el-option v-for="item in scope.row.options" :key="item.value" :value="item.value" :label="item.label" />      </el-select>    </template>  </el-table-column>

调用forceUpdate也没用，我用的是2.15的版本
求大神指导应该怎么处理

Answer 1

类型不匹配，转换一下value类型就好了

Answer 2

Element UI 的 el-select 组件在大多数情况下，如果 v-model 绑定的 value 存在于 el-option 的 value 列表中，那么对应的 label 应该会自动回显。但是，当遇到 value 正确但 label 不回显的偶发性问题时，可能是由于以下几个原因：

1. 数据同步问题：确保 scope.row.status 和 scope.row.options 在组件渲染时都是最新的，并且 scope.row.status 的值确实存在于 scope.row.options 的 value 列表中。
2. 组件更新问题：虽然你提到 forceUpdate 没用，但有时候 Vue 的响应式系统可能需要一些额外的触发来更新视图。你可以尝试使用 Vue 的 this.$forceUpdate() 或使用 key 属性来强制重新渲染组件。
3. 异步数据问题：如果 scope.row.options 是异步获取的，那么可能在 el-select 渲染时，options 还没有被正确填充。确保在 options 完全加载后再渲染 el-select。
4. Vue 版本或 Element UI 版本问题：虽然你提到使用的是 Element UI 2.15 的版本，但有时候与 Vue 的版本也有关系。确保你的 Vue 版本与 Element UI 兼容。

针对你的问题，这里有一些可能的解决方案：

1. 使用计算属性：你可以尝试将 scope.row.options 封装到一个计算属性中，并确保在每次 scope.row.options 变更时，计算属性都会重新计算。

<template>  <!-- ... -->  <el-select v-model="computedStatus" size="mini" :ref="scope.row.id" @change="onStatusChange(scope.row)">    <el-option v-for="item in computedOptions" :key="item.value" :value="item.value" :label="item.label" />  </el-select>  <!-- ... --></template><script>export default {  // ...  computed: {    computedStatus: {      get() {        return this.scope.row.status;      },      set(newValue) {        this.scope.row.status = newValue;      }    },    computedOptions() {      return this.scope.row.options || []; // 确保总是返回一个数组    }  },  // ...};</script>

2. 使用 watch 监听数据变化：如果 scope.row.options 或 scope.row.status 是动态变化的，你可以使用 watch 来监听它们的变化，并在变化时执行一些额外的逻辑。
3. 检查 el-option 的 key 绑定：虽然你使用的是 item.value 作为 key，但也可以尝试使用其他唯一标识符作为 key，以确保每个 el-option 都是唯一的。
4. 更新 Element UI 或 Vue：如果可能的话，尝试更新到最新版本的 Element UI 和 Vue，看看问题是否仍然存在。
5. 查看控制台错误：在浏览器的开发者工具中查看是否有任何与 Vue 或 Element UI 相关的错误或警告，这些可能会提供关于问题的更多线索。