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

效果图:

相关推荐
wuhen_n6 小时前
LeetCode -- 1:两数之和(简单)
javascript·算法·leetcode·职场和发展
曹牧7 小时前
Java:Assert.isTrue()
java·前端·数据库
脾气有点小暴7 小时前
uniapp自定义头部导航
前端·uni-app
假装我不帅7 小时前
jquery.nicescroll使用
前端·javascript·jquery
安_7 小时前
js 数组splice跟slice
开发语言·前端·javascript
用泥种荷花7 小时前
【LangChain学习笔记】链式调用
前端
叫我阿柒啊7 小时前
从Java全栈到前端框架:一场真实的技术面试对话
java·vue.js·spring boot·微服务·typescript·前端开发·后端开发
yinuo7 小时前
IndexedDB 使用指南
前端
小徐_23338 小时前
2025,AI 编程元年,我用 TRAE 做了这些!
前端·程序员·trae
沛沛老爹8 小时前
Web开发者实战RAG评估:从指标到工程化验证体系
前端·人工智能·llm·agent·rag·评估