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

效果图:

相关推荐
Kagol1 小时前
🎉OpenTiny NEXT-SDK 重磅发布:四步把你的前端应用变成智能应用!
前端·开源·agent
GIS之路3 小时前
ArcGIS Pro 中的 notebook 初识
前端
JavaGuide3 小时前
7 道 RAG 基础概念知识点/面试题总结
前端·后端
ssshooter3 小时前
看完就懂 useSyncExternalStore
前端·javascript·react.js
格砸4 小时前
从入门到辞职|从ChatGPT到OpenClaw,跟上智能时代的进化
前端·人工智能·后端
Live000005 小时前
在鸿蒙中使用 Repeat 渲染嵌套列表,修改内层列表的一个元素,页面不会更新
前端·javascript·react native
柳杉5 小时前
使用Ai从零开发智慧水利态势感知大屏(开源)
前端·javascript·数据可视化
兆子龙5 小时前
从高阶函数到 Hooks:React 如何减轻开发者的心智负担(含 Demo + ahooks 推荐)
前端
狗胜5 小时前
测试文章 - API抓取
前端