vue3+ant design vue实现可编辑表格弹出气泡弹出窗~

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;
    }
  }

效果图:

相关推荐
一只猫的梦22 分钟前
AI 适配器架构
前端·chrome
江华森32 分钟前
Python 实现高德地图找房(三):地图可视化与高德 JS API
开发语言·javascript·python
谭光志33 分钟前
AI 是怎么操作浏览器的——browser use 实现原理
前端·javascript·ai编程
weixin_4713830337 分钟前
args,...args与Parameters<T>
开发语言·前端
用户30745969820739 分钟前
GatewayWorker 从零到一完整指南
javascript·php
铁皮饭盒44 分钟前
Bun.redis真正的强项
javascript
用户938515635071 小时前
Node.js 路径与文件系统:从基础到异步进化之路
javascript·后端·面试
一tiao咸鱼1 小时前
前端转 agent # 03 - Pydantic v2 数据校验深入
前端·后端
Cobyte1 小时前
23.Vue Vapor 组件 attrs 的实现
前端·javascript·vue.js
前端H2 小时前
生成式 UI 实战:AI 如何重塑前端界面
前端·人工智能·ui