vue3项目中使用ant design vue气泡确认框展示信息供查看

在实现公司项目的时候，看到了同事使用ant design vue的气泡确认框（popconfirm）这一插件来展示相关信息供直接点击可查看，减少弹窗出现，觉得是一种很不错的写法，先将其记录在这边，方便以后需要的时候可以在这边借鉴。

实现的效果图如下：

 （1）首先要提供一个可以触发这个弹窗出现的点击入口

        像这种可以有两种实现方式

        第一种是像下面这种写法：

        （a）首先引入CButton

        （b） 将这个组件通过components暴露出来

（c）在template中写上 样式代码以及触发代码，如下所示：

 通过@click语法糖触发事件。

不过使用这样子的要注意一点：在这边显示的动态值要在这个位置写{{record.company.companyName}}--->(这个是需要显示的动态公司名称)，而不能在data.ts文件中的customRender：重新显示数据写法，会被覆盖！！

回归正题，接下来介绍第二种写法，也是同事实现使用ant design vue的气泡确认框来展示相关信息供直接点击可查看的写法方式。

        第二种是像下面这种写法：

这样子的写法则是通过 #okButton插槽加上<a>{{record。companyName}}</a>（将要显示的动态内容使用a标签作为链接形式展示，并且通过#okButton插槽来触发点击事件）

接下来重点来了，如上面第二种写法，比如要让公司名称该列展示气泡确认框，判断应该要column.key===‘companyName’（这边想要展示哪个列的就填入那个列定义好的名称）.

像这边不同地方展示的就要判断是在那一列的命名中。

（2） 从ant design vue中引入popconfirm插件，然后通过components暴露出来，再在trmplate

中编写需要的样式。

 这样子便能在template呈现该样式，如下所示，因为这边使用的只需要展示，不需要它的'取消''确定',可以通过:showCancel="false"来设定不展示。

 这样子设置结束便能得到如下图的气泡确认框。

接下来就是第三步，在气泡框中实现表格样式展示，就如最开始展示的效果图那样。

（3）首先从ant design vue中引入Descriptions（描述列表），在components中需要暴露该组件本身，以及它的Item，方便后续在template中的需要使用。

 在template中的使用如下，那么要如何让其能够展示在popConfirm中呢，我看到同事是通过在popConfirm中内嵌一个<template #title>的所展示的详情表格能作为标题展示在popConfirm中。

 其中Descriptions是详细表格大边框的实际范围，设定多少个列等等的，而真正需要展示什么内容的则是通过DescriptionsItem这边定义好那一列的标题以及动态展示的数据。

然后还可以在style中设定描述列表的样式，如下：

因为设定的是两列，所以每一个colum的width加起来要是50%，两个colunm 加起来100%，不设置的话也有默认设置的宽占比。

这样子一系列设置完成之后，便可以实现最开始的样式展示。

这个Descriptions组件在ant design vue官网中是这么介绍的：