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

相关推荐
麦兜*1 小时前
Spring Boot 集成Reactive Web 性能优化全栈技术方案,包含底层原理、压测方法论、参数调优
java·前端·spring boot·spring·spring cloud·性能优化·maven
Jinkxs1 小时前
JavaScript性能优化实战技术
开发语言·javascript·性能优化
知了一笑1 小时前
独立开发第二周:构建、执行、规划
java·前端·后端
UI前端开发工作室2 小时前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~2 小时前
重学前端004 --- html 表单
前端·html
TE-茶叶蛋2 小时前
Flutter、Vue 3 和 React 在 UI 布局比较
vue.js·flutter·react.js
Maybyy2 小时前
力扣242.有效的字母异位词
java·javascript·leetcode
遇到困难睡大觉哈哈2 小时前
CSS中的Element语法
前端·css
Real_man2 小时前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中2 小时前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts