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

效果图:

相关推荐
Zsnoin能几秒前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房几秒前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
轻语呢喃2 分钟前
JavaScript :事件循环机制的深度解析
javascript·后端
摆烂为不摆烂5 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue775 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor
伟笑35 分钟前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js
Sapphire~1 小时前
重学前端003 --- CSS 颜色
前端·css
慧一居士1 小时前
CSS和CSS3区别对比
前端·css3
我血条子呢1 小时前
动态组件和插槽
前端·javascript·vue.js
中微子1 小时前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端