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

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

背景:

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

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

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

 

思考:

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

 

解决:

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

<template>
  <!-- 组件代码 -->
  <span>
    <el-popover ref="popover5" placement="top" width="160" v-model="visible">
      <p>{{content}}</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
        <el-button type="danger" size="mini" @click="deleteItem(id)">确定</el-button>
      </div>
    </el-popover>
    <el-button v-popover:popover5 type="text">删除</el-button>
  </span>
</template>

<script>
module.exports = {
  // 组件名称, 在外部可以使用<delete-confirm-popover></delete-confirm-popover>来使用组件
  name: "delete-confirm-popover",
  // 组件的属性, 可以从外部传入相应的值进来
  props: ["content", "id"],
  data: function() {
    return {
      // 每个组件自己的控制变量
      visible: false
    };
  },
  methods: {
    deleteItem(id) {
      // 具体需要执行的逻辑, 我还不是很会回调的写法, 所以就直接这样完成具体逻辑
      console.log("删除" + id);
      this.visible = false;
    }
  }
};
</script>

Step2: 在需要引入的位置 使用组件 ()

<el-table-column label="操作">
    <template slot-scope="scope">
        <el-button type="text" @click="detail(scope.row.id)" style="margin-right: 10px">查看</el-button>
        <!-- 使用组件, 并传值到组件中 -->
        <delete-confirm-popover content="确定要删除?" :id="scope.row.id"></delete-confirm-popover>
    </template>
</el-table-column>



<script>
// 引入组件
import DeleteConfirmPopover from "../../../components/popover/DeleteConfirmPopover.vue";

export default {
  data() {
    return {
      tableData: []
    };
  },
// 声明需要使用的组件
  components: {
    DeleteConfirmPopover
  }
}
</script>

 

Step3: 效果图

 

结语:

如果以上办法不能帮助你解决问题, 可以留言, 我看到留言后会尽快回复. 萌新, 大虾们手下留情, 轻喷~