『记录篇』之Ant-design-vue

记录篇目录

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，我们下次再见🐻‍❄️