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

效果图:

相关推荐
m0_471199632 分钟前
【vue】dep.notify() 是什么意思?
前端·javascript·vue.js
威风的虫6 分钟前
Vue3中的生命周期钩子函数
前端·javascript·vue.js
m0_4711996333 分钟前
【vue】vue2和vue3响应式原理区别
前端·javascript·vue.js
拜无忧1 小时前
纯css,顺时针3d旋转基座(摩天轮效应)
前端·css
奋斗猿1 小时前
从0到1开发跨平台桌面应用:Electron 实战全指南
前端·electron
之恒君1 小时前
script 标签中的 async 和 defer 的区别
前端·javascript
lkbhua莱克瓦241 小时前
项目知识——Next.js App Router体系
开发语言·javascript·项目知识
浪浪山_大橙子1 小时前
使用Electron+Vue3开发Qwen3 2B桌面应用:从想法到实现的完整指南
前端·人工智能
狗哥哥1 小时前
聊聊设计模式在 Vue 3 业务开发中的落地——从一次代码重构说起
前端·架构
爱吃大芒果1 小时前
从零开始学 Flutter:状态管理入门之 setState 与 Provider
开发语言·javascript·flutter