antdv表单下拉框默认值问题

最新推荐文章于 2024-03-27 15:33:00 发布

_doublechin

最新推荐文章于 2024-03-27 15:33:00 发布

阅读量2.3k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/nanciii_/article/details/120969239

版权

本文探讨如何在Vue应用中实现下拉框的默认值设置，重点在于`v-model`与`defaultValue`的冲突，以及如何处理数据源更新后的自动刷新。通过实例展示了在新增选项后默认值未能自动更新的问题及解决办法。

摘要由CSDN通过智能技术生成

在工作中遇到这样一个需求场景：需要给下拉框添加默认值，且在新增数据后自动更新该默认值为新增的那一条。

心想这还不简单，直接给下拉框添加属性defaultValue="xxx"不就好了。然而事情并没有想象的简单，使用该方法后默认值并不生效。


<a-select placeholder="请选择目录名称" style="width: 170px" :defaultValue="dirList[0].dirId"  v-model="form.dirId" allowClear>
  <a-select-option v-for="(item, index) in dirList" :value="item.dirId" :key="index">
     {{ item.dirName }}
  </a-select-option>
</a-select>

经过试验发现，defalutValue与v-model不能一起使用，使用v-decorator="['dirId']"方式默认值生效。

紧接着问题又来了，新增下拉列表选项后（子组件中），该下拉列表的默认值没有自动更新，数据源更新了，默认值却没有刷新，发现defalutValue只渲染一次。

最后还是使用了v-model，可以刷新默认值了。并且在进入该页面的时候就获取到默认值并赋值给下拉框，解决默认值的问题。