日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

element 表格里，每一行都循環使用el-popover組件，關閉按鈕失效問題如何解決？

作者：大大。 更新時間： 2023-10-16 編程語言

?

?

?具體代碼

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

<head>
  <meta charset="UTF-8">
  <title></title>
  <link  >
  <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>

原文鏈接：https://blog.csdn.net/weixin_43923808/article/details/131856369

  • 上一篇：沒有了
  • 下一篇：沒有了
欄目分類
最近更新