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

效果图:

相关推荐
青莲84311 小时前
Java并发编程高级(线程池·Executor框架·并发集合)
android·前端·面试
程序员Agions11 小时前
Flutter 邪修秘籍:那些官方文档不会告诉你的骚操作
前端·flutter
白驹过隙不负青春11 小时前
Docker-compose部署java服务及前端服务
java·运维·前端·docker·容器·centos
满天星辰11 小时前
Vue.js的优点
前端·vue.js
哒哒哒52852011 小时前
React createContext 跨组件共享数据实战指南
前端
怪可爱的地球人11 小时前
UnoCss最新配置攻略
前端
Carry34511 小时前
Nexus respository 搭建前端 npm 私服
前端·docker
满天星辰11 小时前
使用 onCleanup处理异步副作用
前端·vue.js
POLITE312 小时前
Leetcode 142.环形链表 II JavaScript (Day 10)
javascript·leetcode·链表
qq_2290580112 小时前
lable_studio前端页面逻辑
前端