element-ui el-select/el-cascader设置默认值，默认值不显示

最新推荐文章于 2025-03-21 13:46:23 发布

摸爬滚打小菜鸟

最新推荐文章于 2025-03-21 13:46:23 发布

阅读量6.5k

点赞数 1

文章标签： ui r语言开发语言

本文链接：https://blog.youkuaiyun.com/weixin_43144209/article/details/120891475

版权

本文讲述了在Element-UI项目中，如何解决因数据类型不匹配导致的el-select和el-cascader组件v-model绑定值无法显示的问题，重点介绍了类型转换技巧和解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近接手了一个后台管理项目，项目使用了Element-ui组件，使用了Select 下拉菜单展示并选择内容，使用了cascader做级联城市选择器

看了官方文档我们知道可以使用v-model绑定数据，设置初始值/默认值

<el-form-item label="班级" prop="classId">
   <el-select v-model="form.classId" placeholder="请选择班级">
     <el-option v-for="(value) of classList" :key="value.classId" :label="value.className" :value="value.classId"></el-option>
   </el-select>
</el-form-item>

<el-form-item label="机构地址" prop="district">
   <el-cascader
       style="width: 216px;" 
       v-model="form.district"
       :options="dataDistrict"
       @change="handleChange"
     >
    </el-cascader>
</el-form-item>

问题来了，明明已经设置了v-model但是没有显示，百度发现问题在于数据类型，form.classId的值为 String ，而 el-select列表的 value 为 Number，el-cascader的value是Array，form.district却是JSON字符串，并不全等，导致无法找到对应的项，把数据类型进行转换后就能正常显示啦

知识点来自下方：

element-UI el-select 绑定对象类型，设置初始值，不能正确显示 | 李建记element-UI el-select 绑定对象类型，设置初始值，不能正确显示http://www.lijian4net.work/article/67