解决element-ui中的el-select选择器无法显示选中内容的问题

问题说明

element-ui中的el-select选择器无法显示选中内容，当第二行的input进行输入时，el-select选择器的内容又能够出现选择的东西了，但是点击其它无效，不能够切换数据。

解决方案

原代码

<el-form-item label="App" prop="payChannelAppId">
  <el-select  v-model="form.payChannelAppId" placeholder="请选择App" :disabled="!form.payChannelId" >
    <el-option v-for="item in appOptions" :key="item.appId" :label="item.appName"
                :value="item.appId"/>
  </el-select>
</el-form-item>

修改后

 <el-form-item label="App" prop="payChannelAppId">
  <el-select  v-model="form.payChannelAppId" placeholder="请选择App" :disabled="!form.payChannelId" @change="$forceUpdate()">
    <el-option v-for="item in appOptions" :key="item.appId" :label="item.appName"
                :value="item.appId"/>
  </el-select>
</el-form-item>

为什么 $forceUpdate() 解决了你的问题

• 响应式系统无法检测到变化：Vue 的响应式系统依赖于对数据的追踪，但在某些情况下，数据的变化可能没有被正确检测到或绑定。这可能是因为直接操作对象属性而没有通过 Vue 的方法（例如 $set）来操作。 @change="$forceUpdate()" 强制 Vue重新渲染组件，从而确保最新的数据状态被正确显示。

• 异步数据更新：如果数据更新是异步的，可能会导致视图没有及时更新。在这种情况下，强制更新可以确保视图和数据保持同步。

• 深层次的对象变化：如果你在深层次对象上进行修改，Vue 可能不会自动检测到这些变化。强制更新可以解决这个问题。