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

效果图:

相关推荐
小遁哥5 分钟前
通过AI从零开发RN到在安卓手机上运行
前端·react native·cursor
sure2828 分钟前
react native中实现视频转歌
前端·react native
weipt13 分钟前
关于vue项目中cesium的地图显示问题
前端·javascript·vue.js·cesium·卫星影像·地形
FanetheDivine14 分钟前
图片标注框选组件
前端·react.js
懒大王、15 分钟前
Vue3 + OpenSeadragon 实现 MRXS 病理切片图像预览
前端·javascript·vue.js·openseadragon·mrxs
SoaringHeart15 分钟前
Flutter最佳实践:路由弹窗终极版NSlidePopupRoute
前端·flutter
子玖18 分钟前
antd6的table排序功能
前端·react.js
程序员小李白38 分钟前
动画2详细解析
前端·css·css3
zhengxianyi51541 分钟前
ruoyi-vue-pro数据大屏优化——在yudao-module-report-app使用yudao-moudle-sso优化单点登录
vue.js·前后端分离·数据大屏·go-view·ruoyi-vue-pro优化
eason_fan1 小时前
Rspack核心解析:Rust重写Webpack的性能革命与本质
前端·前端工程化