IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> element 表格里,每一行都循环使用el-popover组件,关闭按钮失效问题如何解决? -> 正文阅读

[JavaScript知识库]element 表格里,每一行都循环使用el-popover组件,关闭按钮失效问题如何解决?

在这里插入图片描述

代码如下,拿去就用:

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    .item:hover {
      color: #ff8040;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
  <div id="app">
    <el-table :data="tableData" border style="width: 50%">
      <el-table-column fixed prop="date" label="日期" width="150">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="province" label="省份" width="120">
        <template slot-scope="scope">
          <div v-for="(item1,index1) in scope.row.children" :key="index1">
            <el-popover placement="top" width="160" :ref="`popover-${scope.$index}${index1}`">
              <p>这是一段内容这是一段内容确定删除吗?</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="cancel(`popover-${scope.$index}${index1}`,item1)">取消
                </el-button>
                <el-button type="primary" size="mini" @click="confirm(`popover-${scope.$index}${index1}`,item1)">确定
                </el-button>
              </div>
              <div slot="reference" class="item">{{item1}}点击弹窗</div>

            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="city" label="市区" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="300">
      </el-table-column>
      <el-table-column prop="zip" label="邮编" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: function () {
        return {
          visible: false,
          tableData: [
            {
              "id": 45,
              "children": [
                5,
                5,
                5
              ],
            },
            {
              "id": 50,
              "children": [
                35,
                2
              ],
            },
            {
              "id": 51,
              "children": [
                7,
                3
              ],
            },
            {
              "id": 53,
              "children": [
                4,
                3
              ],
            },
            {
              "id": 55,
              "children": [
                2,
                5,
                1,
                5
              ],
            },
            {
              "id": 57,
              "children": [
                2,
                3
              ],
            },
          ]
        }
      },
      methods: {
        cancel(e, item1) {
          let arr = this.$refs[e]
          //这边不太清楚为什么获取到的节点会是一个数组集合,索性直接循环一遍,每一个都执行doClose关闭弹窗方法
          arr.forEach((item, index) => {
            this.$refs[e][index].doClose()
          });
        },
        confirm(e, item1) {
          let arr = this.$refs[e]
          arr.forEach((item, index) => {
            this.$refs[e][index].doClose()
          });
          console.log(item1);
        },
        handleClick(row) {
          console.log(row);
        }
      },

    })
  </script>
</body>

</html>
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-04 15:27:11  更:2022-03-04 15:30:37 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 8:32:57-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码