在 Ant Design Vue 表格中插入广告卡片的实现
摘要
介绍如何使用 Ant Design Vue（AntdVue）表格组件，并在表格的两行之间插入一个自定义的卡片组件。
需求：在表格中的两行之间插入卡片
- 解释具体需求，即在 AntdVue 表格中的两行之间插入一个自定义的卡片组件。
- 提及在表格的
expandedRowRender属性中插入组件的方法。
背景
我们在开发一些面向企业用户的后台系统时，在遇到一些活动时候，需要增加对活动的引导。一般产品会选择在页面的头部增加引导栏，但有时候也需要在表格中间插入一些引导卡片。
实现方式
目前开发的项目是使用了jsx语法的vue项目（对对对，我知道很奇怪，别骂，前人的债），所以本文会介绍如何在antdv的表格组件中实现插入自定义卡片的功能。antdv实际上是机遇antd实现的vue版本，api类似，所以方案也适用于antd。
注：本文中使用的antdv版本为2x。
step1：使用expandedRowRender渲染自定义卡片
<Table
expandedRowRender={({ record }) => {
if (record.isCardRow) {
return (<Card>
<p>This is a card.</p>
</Card> );
}
return null;
}}
/>
注意：此处使用是jsx语法，expandedRowRender的定义分别有函数类型、模板语法类型两种，你需要根据你使用的是什么类型来确定参数的传递。
你可以通过上述方式在列表空隙插入自定义卡片。但你会发现即使expendRowRender返回了null，在两行之间还是会有插入的空白行。
step2：处理expand的交互问题
为什么返回了null，还有会插入的空白行？
Table组件还有另一个属性expandedRowKeys用来控制展开的行，如果不指定的话，则默认全部展开。OK说到这里大家都明白了，我们只需要指定expandeRowKeys为我们需要插入自定义卡片的上一行即可。
<Table
expandRowKeys={['kk']}
expandedRowRender={({ record }) => {
if (record.isCardRow) {
return (<Card>
<p>This is a card.</p>
</Card> );
}
return null;
}}
/>
step3：处理expand带来的ui问题
隐藏expandIcon
<Table
expandRowKeys={['kk']}
expandedRowRender={({ record }) => {
if (record.isCardRow) {
return (<Card>
<p>This is a card.</p>
</Card> );
}
return null;
}}
expandIcon={() => null}
class="table"
/>
隐藏左侧多余的空白区域
.table {
.ant-table-expand-icon-th,
.ant-table-row-expand-icon-cell {
width: 0;
padding: 0;
}
}
至此我们就完成了在antdv中插入自定义卡片这个功能。
结语
实际上这不算是一个很难的功能，但是因为涉及比较多的属性且与组件库强关联，如果我们单看组件库的文档能没有实现的思路，次考就可以考虑问问ChatGPT了!
没错，本文的所有功能都是通过问GPT而完成的（实在是vue + jsx太魔法了真不会），不过GPT会犯错，比如在我问”如何隐藏左侧展开图标”的时候，它的回答是设置customExpandIcon，实际上在antdv中这个属性名为expandIcon。所以即便是从gpt中得到了答案，我们也需要检验其正确性。
