背景
项目A是2022年初启动的项目,当时前端使用的是vue3 +ant-design-vue2.2.8,项目开发期间发现ant-design-vue官网已正式推出3,且不推荐2.x版本。
初看3.0
在使用过程中,文档里也看到很多3.0新增的功能比较的实用和贴切需求,比如:
-
InputNumber数字输入框组件,新增addonAfter属性支持后置标签 -
Select组件多选文字过长会默认悬浮显示完整title、新增slot:tagRender支持自定义tag内容render
升级实践总结
在项目中升级ant-design-vue后,根据控制台的warning修改,主要遇到的改动是:
1)Table组件内容插槽配置
Warning: [ant-design-vue: Table] `column.slots` is deprecated. Please use `v-slot:headerCell` `v-slot:bodyCell` instead.
官方文档说明:
项目中修改:去掉column.slots,改成v-slot:headerCell、v-slot:bodyCell。
注意:如果设置了
v-slot:bodyCell,所有column都会“进入”到插槽,需在插槽内自行过滤掉不使用插槽的情况。`
2)Modal组件footer插槽配置
问题:项目中封装了一个modal的组件,里面定义了footer插槽支持自定义,升级后发现没有自定义的footer都不显示了。
修改:在封装的modal组件中判断slots.footer是否定义,如果没有则不加入
<template #footer v-if="hasFooterSlot"> <slot name="footer"> </slot> </template>
估计是
antdv新版本modal默认定义了template #footer就占位了,不考虑没有实际定义插槽的情况(没内容则为空),老版本2.2.8如果没有实际定义插槽内容会给出默认footer的(如下2图所示)。
2.2.8版本例子:
3.x例子:
对于
antdv这一点,不知基于什么考虑修改了的,个人建议还是没定义footer slot时,给出默认footer会比较好的哦,如果不需要footer是可以直接用:footer="null"的对吧