el-select 的默认选中 以及后端返回的数据进行默认选中

前言

本次内容为el-select的两种默认选中方式,一种自定义内容的默认选中,一种的后端返回数据的默认选中以及后端返回数据的默认选中,及注意事项。

注意点!!!

v-model 拿到的值一定要是纯数值类型,只有数值类型才会自动加载对应的选中项,其他类型的则不生效

一 ,自定义内容的默认选中

javascript 复制代码
statusType: [
                { label: '正常', value: 1 },
                { label: '禁用', value: 0 },
            ],
            
<el-select v-model="ruleForm.status" placeholder="请选状态" clearable>
      <el-option v-for="item in statusType" :key="item.value" :label="item.label"
       :value="item.value"></el-option>
</el-select>

二,由后端返回的数据默认选中的注意点:

1.你的遍历的时候value一定要是数值型数据,

2.有的时候查看你el-select内容的时候,内容会变成选项对应的数值,原因就是你的v-moule读取的数据的时机比你对应总数据的时机早,所以默认项内容就会变成数值而不是你对应的内容

相关推荐
清汤饺子1 分钟前
OpenSpec:让 AI 编程从"开盲盒"到"先签字再干活"
前端·javascript·后端
han_6 分钟前
JavaScript设计模式(七):迭代器模式实现与应用
前端·javascript·设计模式
yume_sibai9 分钟前
Vue 3 表单设计器实现
vue.js·交互·ux
吴佳浩 Alben12 分钟前
Vibe Coding 时代:Vue 消失了还是 React 太强?
前端·vue.js·人工智能·react.js·语言模型·自然语言处理
wuhen_n13 分钟前
错误处理与容错机制:让AI学会“从失败中学习”
前端·javascript·ai编程
console.log('npc')21 分钟前
react弹窗组件
前端·javascript·react.js
前端大波26 分钟前
Vue 项目中让 AI 更稳:AGENTS.md + Prompt 模板实践
vue.js·人工智能·prompt
一点 内容29 分钟前
深入浅出:解锁React Hooks的魔法——从入门到实战优化指南
javascript·react.js·ecmascript
紫_龙31 分钟前
最新版vue3+TypeScript开发入门到实战教程之组件通信之一
前端·vue.js·typescript
故以往之不谏33 分钟前
JAVA--类和对象4.1--构造方法基础
java·开发语言·javascript