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

效果图:

相关推荐
黎明初时1 分钟前
react基础框架搭建4-tailwindcss配置:react+router+redux+axios+Tailwind+webpack
前端·react.js·webpack·前端框架
小沐°2 分钟前
vue3-父子组件通信
前端·javascript·vue.js
铅笔侠_小龙虾3 分钟前
Ubuntu 搭建前端环境&Vue实战
linux·前端·ubuntu·vue
码界奇点4 分钟前
基于逆向工程技术的Claude Code智能Agent系统分析与重构研究
javascript·ai·重构·毕业设计·源代码管理
yuhaiqun19895 分钟前
发现前端性能瓶颈的巧妙方法:建立“现象归因→分析定位→优化验证”的闭环思维
前端·经验分享·笔记·python·学习·课程设计·学习方法
树叶会结冰14 分钟前
TypeScript---循环:要学会原地踏步,更要学会跳出舒适圈
前端·javascript·typescript
Zyx200728 分钟前
JavaScript 中的 this:作用域陷阱与绑定策略
javascript
唐叔在学习29 分钟前
前端响应式设计实践:布局与字体自适应方案
前端·响应式设计
海云前端133 分钟前
如果要设计一个开源的Code EditorSDK,你会向开发者暴露哪些API?
前端
2501_9462447836 分钟前
Flutter & OpenHarmony OA系统底部导航栏组件开发指南
android·javascript·flutter