Vue 2.0 Element-UI el-select选择器显示问题及解决方案

在Vue 2.0版本的Element UI中，用户可能遇到一个问题，即在`el-select`选择器中，尽管选择了选项并且`change`方法被正确触发，但选中的内容并未在UI上显示。这个问题通常出现在如下的`select.vue`组件中： ```html <template> <div> <div class="row" v-for="RowItem in rows"> <div class="col" v-for="colItem in RowItem.configVos"> <el-select v-model="formData[colItem.paramCode]" :class="getModel(colItem.paramCode)" @change="onSelectChange(colItem.paramCode, formData[colItem.paramCode])"> <el-option v-for="option in colItem.configOptions" :label="option.optionCode" :value="option.optionValue"> </el-option> </el-select> </div> </div> </div> </template> ``` 问题可能出在`v-model`绑定的值上，或者与`el-option`的`label`和`value`属性的对应关系有关。具体来说： 1. v-model绑定问题：`v-model="formData[colItem.paramCode]"`应该确保`formData`对象中有对应的键对应于选中的`option`值。如果在`data`对象初始化时，`formData`中没有设置这些键值对，那么选中的内容不会显示，但`change`方法会被触发，因为`v-model`的双向数据绑定仍然在运行。 2. label和value属性：检查`el-option`中的`label="option.optionCode"`和`value="option.optionValue"`是否正确。`optionCode`应该是展示在下拉列表中的文本，而`optionValue`应是实际选中的值。确保这两个属性引用了正确的数据字段。 3. 获取初始数据问题：在`getFormData`方法中，确认`axios.get`请求返回的数据结构正确，并且`formData`的键值对已经设置为预期的`option`值。 4. 渲染问题：`getModel(colItem.paramCode)`可能是根据`colItem.paramCode`动态计算类名的函数，确保这个函数正确地处理了选中的值，以便正确应用样式。 为了解决这个问题，首先检查数据模型和`el-option`配置，确保它们之间的一致性。如果数据结构没有问题，尝试在`mounted()`或`created()`钩子中手动设置一个默认选项，以便初始状态下显示正确的值。同时，检查`getModel`函数是否正常处理选中的值。 最后，确保Vue实例正确地监听并响应了`change`事件，这可以通过在控制台打印`onSelectChange`方法的参数来验证。如果问题依然存在，考虑更新Element UI到最新版本，因为旧版本可能存在已知的bug。