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值的类型不同,只要改成类型相同就能解决该问题了

相关推荐
qq_2461000514 分钟前
CSDN risk probe 1773588273
开发语言·javascript·ecmascript
ByteCraze21 分钟前
Vue 递归组件实战:手写一个文件/文件夹树形组件
javascript·vue.js·ecmascript
前端Hardy32 分钟前
前端如何防止用户重复提交表单?4 种可靠方案(附防坑指南)
前端·javascript·面试
前端Hardy32 分钟前
用户真的关掉页面了吗?前端精准检测页面卸载的 4 种方法(附避坑指南)
前端·javascript·面试
yangyanping2010842 分钟前
Vue入门到精通七之关键字const
前端·javascript·vue.js
姝然_95271 小时前
Jetpack Compose 绘制流程与自定义布局
前端
lxh01131 小时前
重复的DNA序列
开发语言·javascript·ecmascript
姝然_95271 小时前
Jetpack Compose Brush 渐变
前端
阿鑫_9961 小时前
通用-ESLint+Prettier基础知识
前端·后端
ai超级个体1 小时前
金三银四,一个面试官连连夸赞的个人网页技术分享
前端·面试·three.js·threejs·网页设计·网页灵感·网页分享