当前位置: 首页 > article >正文

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

1、这里主要是介绍下::v-deep伪元素的作用。用于穿透组件作用域,以便在组件内部修改样式。用来覆盖Ant Design Vue组件库中的样式

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

效果图:


http://www.kler.cn/news/309874.html

相关文章:

  • Day 72
  • 在k8s中,客户端访问服务的链路流程,ingress--->service--->deployment--->pod--->container
  • 【大数据】探索怎么从一段话中解析关键信息(寄件人相关信息)
  • 体感魂斗罗(一)
  • vue 数组转字符串以逗号分隔
  • 9.18 C++对C的扩充
  • AI逻辑推理入门
  • 钢材表面缺陷数据集以coco格式做好了数据集的划分,1200张训练集,600张验证集,对应的json文件也在里面
  • 腾讯 IEG 游戏前沿技术 二面复盘
  • python如何实现队列
  • 18063 圈中的游戏
  • 身份证阅读器API模式 VUE Dorado7
  • 计数服务怎么设计?
  • 【AI学习】AI绘画发展简史
  • nginx进阶篇(二)
  • C++ 常用设计模式
  • 【.net core】线程的创建和方法调用
  • LineageOS源码下载和编译(Xiaomi Mi 6X,wayne)
  • linux Command
  • HT3163 免电感滤波25W AB/D类音频功放
  • 图数据库 neo4j 安装
  • RocketMQ实战与集群架构详解
  • C# 在WPF中实现图表生成
  • 大数据时代下会计数字化的思考与建议
  • 实战04-http请求
  • flutter集成百度地图定位 ‘BMKLocationManager.h‘ file not found报错
  • 消防指挥中心控制台:守护安全的关键枢纽
  • TCP/IP协议概述
  • 【乐吾乐大屏可视化组态编辑器】使用手册
  • Android 用线程池实现一个简单的任务队列(Kotlin)