Vue Popover 弹出框在table列表中的使用

本职是纯Java后端, 最近刚学Vue的萌新, 说得不对勿喷, 如果有更好的建议, 希望能在评论里看到你的留言

背景:

最近在自己做一个前端项目 (纯个人娱乐), 在table中希望对删除操作做一个弹窗提醒, 最初直接从ElementUI库中找到Popover弹窗代码之后, 直接复制到项目中, 遇到了如下的坑:

1. 列表中每一项都需要单独的visible变量来控制展示, 如果直接粘过去, 会导致点击删除按钮后, 全部一起展示. 全部一起关闭, 这明显是不符合初衷的.

项目是使用Vue-cli搭建的,  使用Vue UI创建的项目以及插件, 目录结构如下:

 

思考:

为了解决这个办法, 百度Google都看了一下, 发现使用Vue组件开发是一个比较好的思路, 虽然我还不是很会很高深的知识, 但是照葫芦画瓢, 还是能模仿一下的.

 

解决:

Step1: 在components中添加一个删除确认弹窗组件 (代码中有一段注释):

<template>
  <!-- 组件代码 -->
  <span>
    <el-popov