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读取的数据的时机比你对应总数据的时机早,所以默认项内容就会变成数值而不是你对应的内容

相关推荐
小磊哥er14 分钟前
深入解构Claude Code - 第 7 篇 · 连接外面的世界
javascript·ai编程
小磊哥er36 分钟前
深入解构Claude Code - 第 6 篇 · 终端里的图形界面
javascript·ai编程
海兰38 分钟前
【应用】基于 Next.js 16 + Python mplfinance的金融K线图与技术指标可视化平台(一)
javascript·python·金融
可乐鸡翅yeah_2 小时前
hls.js 内存泄漏实战排查,直播 M3U8 长时间播放异常定位方案
开发语言·javascript·python·django·ecmascript·m3u8·m3u8在线
可乐鸡翅yeah_2 小时前
第三方接口对接 M3U8 流媒体排坑实战,解决外部服务商流兼容难题
前端·javascript·python·django·html·m3u8·m3u8在线
默_笙3 小时前
🏠 「LLM Notes」:我用 Next.js + Redis 给自己造了个笔记博客
前端·javascript
ruanCat4 小时前
Prettier 明明执行成功,Markdown 为什么还是没变?一次插件误诊复盘
前端·javascript·node.js
软件开发技术深度爱好者4 小时前
在线学习实践 TypeScript 的官方Playground(演练场)使用介绍
javascript·学习·typescript
2601_962122975 小时前
nginx 部署前端vue项目
前端·vue.js·nginx