django + element select选择器如何显示默认option选项

小张pingpang

于 2020-06-16 13:42:46 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/hhhhh11/article/details/106784886

本文介绍了在Django+Vue环境中，使用Element Select组件时遇到的model与options不匹配的问题。当Django模型返回的tags是数值型数组，而Element Select的options是标签名称字符串时，导致默认选项无法正确显示。解决方案是调整option的:value，使其引用对象，确保model中的id与option的value对应，从而实现默认选中。同时，文章提醒在model与option类型不一致时，需要对model进行转换，确保对应关系正确。

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

场景

当前场景为编辑测试用例信息：Django的model当中定义了TestCase， Tag模板，其中TestCase中包含tags字段，用例存储当前测试用例的标签，与标签表Tag是多对多的关系，用例与标签的关系保存在test_case_tags表中。
现在需要在vue中展示测试用例的信息，其中在编辑弹窗中要显示当前用例的标签以及所有可选的标签，且用例标签显示为默认选中。
在这里插入图片描述

问题：element select中model与options不匹配

在这里插入图片描述
此时，form中传入的model （tags）默认值为django中TestCase模型中定义的tags字段，此字段返回的类型为数值型数组：

而element select中option获取的是所有的tags，为了容易理解，标签内容传入的label是item.name即字符串类型（注，标签形式tag {“id”：1，
"name”: “Tag1”}），传入的option即为tag中的name，如“Tag1”：

        <el-form-item label="标签" :label-width="formLabelWidth" prop="cid">
          <el-select
            v-model="form

最低0.47元/天解锁文章

200万优质内容无限畅学