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

效果图:

相关推荐
合作小小程序员小小店10 小时前
web开发,在线%超市销售%管理系统,基于idea,html,jsp,java,ssh,sql server数据库。
java·前端·sqlserver·ssh·intellij-idea
不爱学英文的码字机器11 小时前
重塑 Web 性能:用 Rust 与 WASM 构建“零开销”图像处理器
前端·rust·wasm
浩星11 小时前
react的框架UmiJs(五米)
前端·javascript·react.js
子醉14 小时前
推荐一种适合前端开发使用的解决本地跨域问题的办法
前端
Niyy_14 小时前
前端一个工程构建多个项目,记录一次工程搭建
前端·javascript
xiangxiongfly91515 小时前
CSS link标签
前端·css
快乐非自愿15 小时前
常用设计模式:工厂方法模式
javascript·设计模式·工厂方法模式
岁月宁静16 小时前
AI 多模态全栈应用项目描述
前端·vue.js·node.js
十年磨一剑~16 小时前
html+js开发一个测试工具
javascript·css·html