记录篇目录
Ant-design-vue篇
文章目录
代码仓库
Gitee仓库:博客代码仓库
一、文章目的
记录篇,顾名思义是记录下在项目开发、框架使用中遇到的问题,目的有两个:在后续遇到相同问题时,可以翻看自己的文章更快的解决问题、分享给遇到相同问题的朋友们,有这么一种解决方案。因为问题是可遇而不可求的,因此我也希望自己可以持续的更新记录片这个文章题材。
二、表格相关
记录:Table表格复杂对象(嵌套对象)展示解决方案
记录时间:2022-11-30
1. 数据结构
这里只做了一条数据,大概的结构就如图所示,每一个表格项是一个用户数据,有基本数据 和 详情数据。一般的处理方式可能是通过表格项按钮的方式,打开一个模态框来展示详细信息,但也有情况是想展示详情数据中的某几项在外部表格中。
2. 解决方案
方案一:customRender
通过customRender配置项,得到dataIndex所对应的值即detail对象,再从detail对象中获取到所需要的值,渲染在页面上
方案二:scopedSlots/slots/bodyCell
在3.x版本后使用的是bodyCell的方式定义表格插槽,其他版本用法与之类似。
效果图
两者的效果一致,就只放一张效果图意思一下了。
三、模态框相关
记录:自定义Modal底部解决方案
记录时间:2022-11-30
1. 具名插槽替换
默认模态框使用的是默认插槽中的底部内容,我们可以使用具名插槽将默认内容进行替换。
实现效果
总结
学无止境,只有不断积累,才可能有更好更优秀的解决方案。对于出现的bug,不只能是当场解决就算完成了,应该对其记录,加深印象,时不时翻阅自己解决问题的记录,也许根据原有解决方案以及越来越多的知识储备,可以产生更好的解决思路。
我是Donp1,我们下次再见🐻❄️