vue3中弹框中的el-select下拉组件显示value而不显示label

1.场景

使用element-ui中的el-select,给选择框赋值时显示的值是value不是label

2.原因分析

3.解决方法

在点击编辑按钮后将获取到的对象中的os属性值改为string类型

html 复制代码
<el-select v-model="form.os" clearable placeholder="请选择" style="width: 100%;">
  <el-option v-for="item in datas.optionsList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
javascript 复制代码
// 编辑
const editBtn = (row) => {
  console.log('编辑商品', row);
  form.value.serverAddress = row.serverAddress
  form.value.os = String(row.os)
}

4.总结

说白了就是列表中的数据与下拉列表数据中的value值的类型不同,只要改成类型相同就能解决该问题了

相关推荐
北辰alk3 分钟前
为什么 Vue 中的 data 必须是一个函数?深度解析与实战指南
vue.js
北辰alk4 分钟前
Vue 的 <template> 标签:不仅仅是包裹容器
vue.js
Nan_Shu_61410 分钟前
学习: Threejs (2)
前端·javascript·学习
北辰alk14 分钟前
为什么不建议在 Vue 中同时使用 v-if 和 v-for?深度解析与最佳实践
vue.js
北辰alk16 分钟前
Vue 模板中保留 HTML 注释的完整指南
vue.js
G_G#18 分钟前
纯前端js插件实现同一浏览器控制只允许打开一个标签,处理session变更问题
前端·javascript·浏览器标签页通信·只允许一个标签页
北辰alk29 分钟前
Vue 组件 name 选项:不只是个名字那么简单
vue.js
北辰alk30 分钟前
Vue 计算属性与 data 属性同名:优雅的冲突还是潜在的陷阱?
vue.js
北辰alk31 分钟前
Vue 的 v-show 和 v-if:性能、场景与实战选择
vue.js
@大迁世界34 分钟前
TypeScript 的本质并非类型,而是信任
开发语言·前端·javascript·typescript·ecmascript