当前位置: 首页 > 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/a/309874.html

相关文章:

  • [项目代码] YOLOv5 铁路工人安全帽安全背心识别 [目标检测]
  • 【机器学习】机器学习中用到的高等数学知识-3.微积分 (Calculus)
  • uni-app表单⑪
  • VSCode可以安装最新版,并且可以对应Node 12和npm 6
  • 大数据新视界 -- 大数据大厂之 Impala 性能优化:优化数据加载的实战技巧(下)(16/30)
  • css:没错又是我
  • 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类音频功放