架构师

您现在的位置是:首页 > 程序人生 > 前端别闹

前端别闹

vue el-select下拉多选框回显问题

架构师小跟班 2020-06-04 前端别闹
最近在学习vue,入门不难,学习很快,但是过程中遇到很多小且奇葩的坑。你说它小吧,也花了我不少时间一步步排查测试,说它不小吧,最终发现是很小很小的问题引起的。

阴沟里翻船!

最近在学习vue,入门不难,学习很快,但是过程中遇到很多小且奇葩的坑。你说它小吧,也花了我不少时间一步步排查测试,说它不小吧,最终发现是很小很小的问题引起的。

特此记录一下!

事情是这样的。

我需要在点击列表中某一条数据时,显示出该数据的监控设备信息(设备名称,不是设备ID),正确显示应该是这样的:

可实际显示却是这样的:

前端代码如下:

<el-form-item label="监控设备">
  <el-select v-model="form.equipId" placeholder="请选择">
	<el-option
	  v-for="item in equipOptions"
	  :key="item.equipId"
	  :label="item.equipName"
	  :value="item.equipId"
	  :disabled="item.status == 1"
	></el-option>
  </el-select>
</el-form-item>

网上说:value值要与v-model的值一致,我看了看,没毛病啊。

讲道理,只要上述两者的值相等,element的el-select会自动回显对应的label值才对。

查看接口返回数据:可以看到数据是“一样”的。

注意看,为啥我把一样这俩字加了引号????虽然乍看一样,但实际上一个是字符串类型,一个是数字类型。

在vue element里,类型不一样,也认为数据不同,所以data里的equipId找不到对应的equips里的equipId,也就匹配不到equipName了。

继续定位问题就很快了。实体类中,两个equipId定义的类型不同,改为Long类型即可。


文章评论