1、这里主要是介绍下::v-deep
伪元素的作用。用于穿透组件作用域,以便在组件内部修改样式。用来覆盖Ant Design Vue组件库中的样式
TypeScript
<a-table
:dataSource="dataList"
:columns="columns"
:scroll="{ x: '100%' }"
:pagination="false"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'canStop'">
<a-popconfirm
title="是否删除当前数据?"
@confirm="stop(record)"//点击确认的回调
:overlayStyle="{ width: '200px' }"//这也可以设置气泡确认框样式
>
<a style="color: #09f">删除</a>
</a-popconfirm>
</template>
</template>
</a-table>
::v-deep {
.ant-popover {//设置气泡确认框样式
position: relative;
width: 200px;
}
}
效果图: