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

本文介绍了在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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值