1.下拉框显示的问题


这种下拉看不全,不方便选择。

修改方法:

 <a-select labelInValue :options="mapTypes" v-model="record.mapType"
                          @blur="blur(index,'mapType',text,record)"
                          :dropdown-menu-style="{width:'200px'}" 
                          :dropdownMatchSelectWidth="false"
                ></a-select>

增加 dropdown-menu-styledropdownMatchSelectWidth 属性

显示效果

2. 使用v-if 下拉框出现的怪现象

2.1 问题现象

在设计表单时,当类型选择选择A时,显示条件容器A,选择B时显示条件容器B,但是运行时,发现两个下拉框的选项时一样的。 经调试发现,我们在显示A时,A容器的下拉框执行了CREATED方法,切换到B时,B容器下拉框并没有执行。

2.2 原因分析

可以参考下面的这篇文章。

https://segmentfault.com/a/1190000020716723

官方文件给出的说明。

https://cn.vuejs.org/v2/api/#key

2.3 解决办法

2.3.1 改变v-if

在设计表单时,我们默认将 v-if 改成 v-show ,意思是,页面在加载的时候,每一个控件都会执行 执行 created 方法。

2.3.2 在v-if 标注的元素增加 key属性

这样在key变化时,他会执行 条件容器里面的 控件,就会重新执行控件的 created 方法。我们可以看到完整地触发组件的生命周期钩子。

文档更新时间: 2021-08-04 23:34   作者:zyg