el-table 多表格彈窗嵌套數據顯示異常錯亂問題

来源:https://www.cnblogs.com/goodtimeggb/archive/2023/11/10/17824254.html
-Advertisement-
Play Games

1、業務背景 使用vue+element開發報表功能時，需要列表上某列的超鏈接按鈕彈窗展示，在彈窗的el-table列表某列中再次使用超鏈接按鈕點開彈窗，以此類推多表格彈窗嵌套，本文以彈窗兩次為例 最終效果如下示例頁面 2、具體實現和問題拋出 <template> <div class="el_ma ...


1、業務背景

使用vue+element開發報表功能時，需要列表上某列的超鏈接按鈕彈窗展示，在彈窗的el-table列表某列中再次使用超鏈接按鈕點開彈窗，以此類推多表格彈窗嵌套，本文以彈窗兩次為例
最終效果如下示例頁面
多表格彈窗嵌套示例圖

2、具體實現和問題拋出

<template>
    <div class="el_main">
      <el-table
        stripe
        style="width: 100%"
        v-loading="loading"
        row-key="Id"
        :data="list"
      >
        <el-table-column label="ID" prop="Id" min-width="3"> </el-table-column>
        <el-table-column label="類型" prop="Type" min-width="5">
          <template slot-scope="scope">
            {{ formatTaskType(scope.row.Type) }}
          </template>
        </el-table-column>
        <el-table-column label="詳情" prop="TaskTitle" min-width="10" show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="詳情彈窗" 
          min-width="3">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="創建時間" prop="AddTime" min-width="5">
          <template slot-scope="scope" v-if="scope.row.AddTime">
            {{ (scope.row.AddTime * 1000) | formatDate(2) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 詳情彈窗 -->
    <el-dialog
      title="詳情彈窗"
      :visible.sync="detailInfoDialogVisible"
      append-to-body
      width="50%">
        <el-table
            stripe
            style="width: 100%"
            v-loading="loading"
            row-key="Id"
            height="300" max-height="650"
            :data="detailInfo">
            <el-table-column label="ID" prop="TaskId" min-width="80"></el-table-column>
            <el-table-column label="名稱" prop="TaskName" min-width="65"></el-table-column>
            <el-table-column label="成功數量" prop="SuccessNum" min-width="22"></el-table-column>
            <el-table-column label="失敗數量" prop="ErrorNum" min-width="22"></el-table-column>
            <el-table-column label="狀態列表" min-width="22">
              <template slot-scope="scope">
                <el-button @click="handleStatusListClick(scope.row)" type="text">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column label="隊列列表" min-width="30">
              <template slot-scope="scope">
                <el-button @click="handleQueueDataClick(scope.row)" type="text">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
    </el-dialog>
    <!-- 狀態列表彈窗 -->
    <el-dialog
      title="狀態彈窗"
      :visible.sync="statusListDialogVisible"
      append-to-body
      width="30%">
        <el-table
            stripe
            style="width: 100%"
            v-loading="loading"
            row-key="Id"
            height="300" max-height="300"
            :data="statusListInfo">
            <el-table-column label="ID" prop="Id" min-width="80" show-overflow-tooltip="true"> </el-table-column>
            <el-table-column label="標題" prop="Title" min-width="80" show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="返回信息" prop="Msg" min-width="80" show-overflow-tooltip="true"></el-table-column>
          </el-table>
    </el-dialog>
    <!-- 隊列列表彈窗 -->
    <el-dialog
      title="隊列彈窗"
      :visible.sync="queueDataDialogVisible"
      append-to-body
      width="30%">
        <el-table
            stripe
            style="width: 100%"
            v-loading="loading"
            row-key="Id"
            height="300" max-height="300"
            :data="queueDataInfo">
            <el-table-column label="ID" prop="Id" min-width="80" show-overflow-tooltip="true"> </el-table-column>
            <el-table-column label="名稱" prop="Name" min-width="80" show-overflow-tooltip="true"></el-table-column>
          </el-table>
    </el-dialog>
</template>

<script type="text/ecmascript-6">
import { GetXXXReportList, ExportXXXReportList } from '@/api/reportManage'

const urlQuery = [
  'id|number',
  'type|number',
  'currPage|number',
  'pageSize|number',
]

export default {
  components: {
  },

  data () {
    return {
      id: '',
      type: '',
      collectTime: '',
      loading: false,
      list: [],
      currPage: 1,
      pageSize: 10,
      counts: 0,
      detailInfo: [], // 詳情彈窗
      detailInfoDialogVisible: false,
      statusListInfo: [], // 狀態列表彈窗
      statusListDialogVisible: false,
      queueDataInfo: [], // 隊列列表彈窗
      queueDataDialogVisible: false,
      typeArray: [
        {
          value: 1,
          label: '類型一',
        },
        {
          value: 2,
          label: '分類二',
        },
        {
          value: 3,
          label: '分類三',
        },
        {
          value: 4,
          label: '分類四',
        },
        {
          value: 5,
          label: '分類五',
        },
        {
          value: 6,
          label: '分類六',
        },
      ],
      exportLoading: false,
    }
  },
  created () {
    this._getList(true)
  },
  methods: {
    async _getList (init = false) {
      this.loading = true
      if (init) {
        this.currPage = 1
      }
      let startTime, endTime
      if (this.collectTime) {
        startTime = this.collectTime[0] / 1000
        endTime = this.collectTime[1] / 1000 + 86399
      }
      this._setQuery(urlQuery)
      try {
        const data = await GetXXXReportList({
          Id: this.id || 0,
          StartTime: startTime || 0,
          EndTime: endTime || 0,
          Type: this.type || 0,
          CurrPage: this.currPage,
          PageSize: this.pageSize,
        })
        this.list = data.List
        this.counts = data.Counts 
      } catch (error) {
        this.counts = 0
        this.list = []
      }
      this.loading = false
    },
    search () {
      this._getList(true)
    },
    reset () {
      this.id = ''
      this.type = ''
      this.collectTime = ''
      this.list = []
      this.counts = 0
      this._getList(true)
    },
    pageChange () {
      this._getList()
    },
    pageSizeChange (val) {
      this.pageSize = val
      this._getList(true)
    },
    handleClick (row) {
      if (row.Type === 1) {
        this.detailInfoDialogVisible = true
        this.detailInfo = row.detailInfo 
      } else if (row.Type === 2) {
        this.xxxDialogVisible = true
        this.xxxInfo = row.xxx
      } else if (row.Type === 3) {
        this.xxxDialogVisible = true
        this.xxxInfo = row.xxx
      }
    },
    handleStatusListClick (row) {
      this.statusListDialogVisible = true
      this.statusListInfo = row.StatusList
    },
    handleQueueDataClick (row) {
      this.queueDataDialogVisible = true
      this.queueDataInfo = row.queueData
    },
    // 導出
    async exportData () {
      this.exportLoading = true
      let startTime, endTime
      if (this.collectTime) {
        startTime = this.collectTime[0] / 1000
        endTime = this.collectTime[1] / 1000 + 86399
      }
      try {
        const data = await ExportXXXReportList({
          Id: this.id || 0,
          StartTime: startTime || 0,
          EndTime: endTime || 0,
          Type: this.type || 0,
        })
        var raw = window.atob(data)
        var uInt8Array = new Uint8Array(data.length)
        for (var i = 0; i < raw.length; i++) {
          uInt8Array[i] = raw.charCodeAt(i)
        }
        const url = window.URL.createObjectURL(new Blob([ uInt8Array ], { type: 'application/vnd.ms-excel' }))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', 'xxxx報表.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      } catch (error) {
        this.exportLoading = false
      }
      this.exportLoading = false
    },
  },
}
</script>

<style lang="scss">
</style>

3、分析問題

這裡有幾個可能的原因和建議來解決這個問題：
①數據問題：首先確保你的數據源是正確的。檢查你的表格數據是否有任何錯誤或遺漏。
②嵌套表格的渲染時機：如果你的嵌套表格（子表格）是在父表格的某一行展開時才渲染的，那麼你需要確保子表格的數據在正確的時機進行載入。如果數據載入過早，可能會導致異常。
③彈窗的v-if與v-show：如果你使用了v-if來控制彈窗的顯示與隱藏，那麼每次彈窗打開都會重新渲染彈窗內的內容。這可能會導致表格的重新初始化，使用v-show可能會避免這個問題。但需要註意的是，v-show只是在視覺上隱藏元素，元素仍然會被渲染。
④表格的key：如前面所說，Vue使用key來追蹤節點的身份。如果在嵌套表格的場景中，你使用了相同的key，可能會導致身份識別混亂。確保每個表格都有一個獨特的key。
⑤樣式衝突：確保沒有其他樣式影響到表格或彈窗的正常顯示。特別是當你使用了自定義樣式或與Element UI樣式衝突的其他UI庫時。
⑥組件版本：確保你使用的Element UI是最新的版本。舊版本可能存在已知的錯誤，而在新版本中可能已經被修複。

4、解決問題

下麵我從表格的key角度解決下問題
1）嘗試給每個彈窗的el-table加個key -- 未解決數據錯亂的問題
示例代碼如下：

<el-table
	:key="Id"
	stripe
	style="width: 100%"
	v-loading="loading"
	row-key="Id"
	height="300" max-height="300">
</el-table>

2）嘗試給每個彈窗的el-table加個唯一的key -- 解決數據錯亂的問題
示例代碼如下：

<el-table
	:key="Id"
	stripe
	style="width: 100%"
	v-loading="loading"
	row-key="Id"
	height="300" max-height="300">
</el-table>

雖然此種方法解決了我們的問題，但是考慮到每次打開彈窗都會生成隨機數存在一定風險性，具體分析如下：

    隨機數改變了每次渲染時的key值，打破了Vue的節點身份追蹤機制。
    在這種情況下，由於每次渲染都有一個新的隨機數作為key，Vue會將該組件視為全新的節點，從而重新渲染。這樣可以避免由於身份追蹤導致的問題，例如在嵌套表格場景中可能出現的報錯。
    然而，需要註意的是，使用隨機數作為key並不是一個推薦的做法。因為key的主要作用是幫助Vue高效地識別和追蹤節點的身份，以便進行差異化更新。隨機數作為key會破壞這一機制，可能導致性能下降和潛在的問題。
    因此，儘管使用隨機數作為key可以解決某些情況下的報錯，但並不是一個優雅的解決方案。更好的方式是仔細排查問題，找到導致報錯的根本原因，並採取相應的措施進行修複。如果實在無法找到其他解決方案，再考慮使用隨機數作為臨時方案。但在長期開發中，仍然建議尋求更合適、更穩定的解決方案。

3）嘗試給每個彈窗的el-table加個唯一的key(固定不是隨機數) -- 解決數據錯亂的問題（推薦）
示例代碼如下：

<el-table
	:key="generateKey(scheduledDataDownloadInfo)"
	stripe
	header-row-class-name="bos_table_header"
	style="width: 100%"
	v-loading="loading"
	row-key="Id"
	height="300" max-height="650"
	:data="scheduledDataDownloadInfo">
</el-table>

在methods中添加方法

// 生成唯一的key，可以根據具體情況定義
generateKey (data) {
  const uniqueIdentifier = data.map(item => item.Id).join('_')
  return `table_${uniqueIdentifier}`
},

至此，更合適、更穩定的解決方案完成，我們開頭提到的問題得以解決。有更好辦法或者見解的同學歡迎評論區留言，互相學習。

若本文有幫助到閱讀本文的同學，歡迎點贊、關註、收藏，互相學習交流

本文來自博客園，作者：GoodTimeGGB，轉載請註明原文鏈接：https://www.cnblogs.com/goodtimeggb/p/17824254.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [20231109]bash shell快捷鍵alt+number的問題.txt
    前言 由於業務需要，需要多台雲伺服器，但是公有雲的帶寬價格不菲，所以不可能給所有的雲伺服器都配上公網IP，一方面是成本的問題，另一方面也是公網安全的問題。 所以通過其它的方式使用無公網的雲伺服器來來實現對外資源的訪問。 一、操作步驟 至少需要有一臺具有公網IP的雲伺服器！ 1、開啟ECS的路由轉發功 ...
  • 國產瀚高資料庫簡單實踐 及 authentication method 13 not supported 錯誤解決方法
    近幾年IT界軟硬體“國產化”搞得很密集，給很多公司帶來了商機。但是有些公司拿國外的代碼改改換個皮膚，就是“自主知識產權”的國產軟體，光明正大賣錢，這個有點...，還經常有醜聞露出，譬如某星瀏覽器、C某-IDE... 話不多說，最近有個項目需要國產化改造，業主方推薦了國產資料庫 瀚高資料庫，我們原來用 ...
  • [20231103]rename IDL_UB1$後使用bbed的恢復3.txt
    本文分享自華為雲社區《淺析KV存儲之長尾時延問題，華為雲 GeminiDB Redis 探尋行業更優解決方案！》，作者：華為雲資料庫GaussDB NoSQL團隊。 目前，KV存儲的廣泛使用極大程度上源於快速訪問的業務需求，而這種業務通常對時延敏感度高，在較好的平均性能下，還需要解決特定場景下的性能 ...
  • 如何構建新一代實時湖倉？袋鼠雲基於數據湖的探索升級之路
    在之前的實時湖倉系列文章中，我們已經介紹了實時湖倉對於當前企業數字化轉型的重要性，實時湖倉的功能架構設計，以及實時計算和數據湖結合的應用場景。 在本篇文章中，將介紹袋鼠雲數棧在構建實時湖倉系統上的探索與落地實踐，及未來規劃。 數棧為什麼選擇實時湖倉 數棧作為一個數據開發平臺，在未引入實時湖倉之前提供 ...
  • 線上SQL超時場景分析-MySQL超時之間隙鎖
    資料庫底層實現博大精深，本文所述，根據線上場景進行了一些研究和探討，希望能為相關場景提供一些啟示。文章中難免會有不足之處，希望讀者能給予寶貴的意見和建議 ...
  • 【安卓13】谷歌原生桌面launcher3源碼修改，修改桌面佈局（首屏應用、小部件、導航欄、大屏設備任務欄）
    前言 近期接到一個關於谷歌EDLA認證的需求，我負責的是谷歌原生桌面佈局的修改，通過研究源碼，將涉及到了一些修改思路發出來，大家可以參考一下有沒有對你有用的信息。主要修改內容有： 1、搜索欄、底部導航欄未居中 2、中部應用未按要求排布，詳情請參考摹客 3、在原生Google桌面未添加中性S-writ ...
  • 原型污染
    使用不可信的數據，通過調用不安全的遞歸函數來暴露預設原型 原型污染：基礎 什麼是原型污染？ 原型污染是一種針對JavaScript運行時的註入攻擊。通過原型污染，攻擊者可以控制對象屬性的預設值，從而篡改應用程式的邏輯並可能導致服務被拒絕，甚至在某些極端情況下遠程執行代碼。 現在，你是不是滿腦子充滿了 ...
  • 記錄--ECharts — 餅圖相關功能點（內環、外環、環形間隔、環形文字、輪播動畫）
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 記錄一下在公司遇到的一些功能，以及相關實現 以上的內容我花了一周時間去實現的，自己也覺得時間很長，但主要因為很少使用ECharts，導致使用的過程中大部分的時間都在查文檔。 對於上面的這些功能點，其實算是寫了兩遍吧，這周一開了個Code ...
一周排行
    -Advertisement-
    Play Games
  • （開源）都進來！簡單易懂、功能強大的許可權+可視化流程管理系統
    1、預覽地址：http://139.155.137.144:9012 2、qq群:801913255 一、前言 隨著網路的發展，企業對於信息系統數據的保密工作愈發重視，不同身份、角色對於數據的訪問許可權都應該大相徑庭。 列如 1、不同登錄人員對一個數據列表的可見度是不一樣的，如數據列、數據行、數據按鈕 ...
  • 設計模式-C#實現簡單工廠模式
    前言 上一篇文章寫瞭如何使用RabbitMQ做個簡單的發送郵件項目，然後評論也是比較多，也是準備去學習一下如何確保RabbitMQ的消息可靠性，但是由於時間原因，先來說說設計模式中的簡單工廠模式吧！ 在瞭解簡單工廠模式之前，我們要知道C#是一款面向對象的高級程式語言。它有3大特性，封裝、繼承、多態。 ...
  • Nodify學習 一：介紹與使用
    Nodify學習 一：介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com) Nodify學習 二：添加節點 - 可樂_加冰 - 博客園 (cnblogs.com) 介紹 Nodify是一個WPF基於節點的編輯器控制項，其中包含一系列節點、連接和連接器組件，旨在簡化構建基於節點的工具的過程 ...
  • 使用C#/.NET解析Wiki百科數據實現獲取歷史上的今天
    創建一個webapi項目做測試使用。 創建新控制器，搭建一個基礎框架，包括獲取當天日期、wiki的請求地址等 創建一個Http請求幫助類以及方法，用於獲取指定URL的信息 使用http請求訪問指定url，先運行一下，看看返回的內容。內容如圖右邊所示，實際上是一個Json數據。我們主要解析 大事記 部 ...
  • .NET科普：.NET簡史、.NET Standard以及C#和.NET Framework之間的關係
    最近在不少自媒體上看到有關.NET與C#的資訊與評價，感覺大家對.NET與C#還是不太瞭解，尤其是對2016年6月發佈的跨平臺.NET Core 1.0，更是知之甚少。在考慮一番之後，還是決定寫點東西總結一下，也回顧一下.NET的發展歷史。 首先，你沒看錯，.NET是跨平臺的，可以在Windows、 ...
  • Nodify學習 二：添加節點
    Nodify學習 一：介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com) Nodify學習 二：添加節點 - 可樂_加冰 - 博客園 (cnblogs.com) 添加節點（nodes） 通過上一篇我們已經創建好了編輯器實例現在我們為編輯器添加一個節點 添加model和viewmode ...
  • 論如何直接用EF Core實現創建更新時間、用戶審計，自動化樂觀併發、軟刪除和樹形查詢（上）
    前言 資料庫併發，數據審計和軟刪除一直是數據持久化方面的經典問題。早些時候，這些工作需要手寫複雜的SQL或者通過存儲過程和觸發器實現。手寫複雜SQL對軟體可維護性構成了相當大的挑戰，隨著SQL字數的變多，用到的嵌套和複雜語法增加，可讀性和可維護性的難度是幾何級暴漲。因此如何在實現功能的同時控制這些S ...
  • C# 使用模式匹配的好處,因為好用所以推薦~
    類型檢查和轉換：當你需要檢查對象是否為特定類型，並且希望在同一時間內將其轉換為那個類型時，模式匹配提供了一種更簡潔的方式來完成這一任務，避免了使用傳統的as和is操作符後還需要進行額外的null檢查。 複雜條件邏輯：在處理複雜的條件邏輯時，特別是涉及到多個條件和類型的情況下，使用模式匹配可以使代碼更 ...
  • 推薦一種批量判斷文件是否存在的快速辦法
    在日常開發中，我們經常需要和文件打交道，特別是桌面開發，有時候就會需要載入大批量的文件，而且可能還會存在部分文件缺失的情況，那麼如何才能快速的判斷文件是否存在呢？如果處理不當的，且文件數量比較多的時候，可能會造成卡頓等情況，進而影響程式的使用體驗。今天就以一個簡單的小例子，簡述兩種不同的判斷文件是否... ...
  • 論如何直接用EF Core實現創建更新時間、用戶審計，自動化樂觀併發、軟刪除和樹形查詢（中）
    前言 資料庫併發，數據審計和軟刪除一直是數據持久化方面的經典問題。早些時候，這些工作需要手寫複雜的SQL或者通過存儲過程和觸發器實現。手寫複雜SQL對軟體可維護性構成了相當大的挑戰，隨著SQL字數的變多，用到的嵌套和複雜語法增加，可讀性和可維護性的難度是幾何級暴漲。因此如何在實現功能的同時控制這些S ...
所有分類