基于vue3-elemenyui的動態列案例

本案例主要是實現數據模型的解析以及實現el-table的動態列加載。

1.數據結構

?公司A\B\C\測試1，是列，功能-url，是行數據，其中功能x是行頭。

      this.rawData = [{companyName: "公司A",rpWebShows: [{ "功能1": "https://map.baidu.com/" },{ "功能2": "https://map.baidu.com/" },{ "功能3": "https://map.baidu.com/" }]},{companyName: "公司B",rpWebShows: [{ "功能1": "https://map.baidu.com/" },{ "功能3": "https://map.baidu.com/" },{ "功能4": "https://map.baidu.com/" }]},{companyName: "公司C",rpWebShows: [{ "功能2": "https://map.baidu.com/" },{ "功能3": "https://map.baidu.com/" },{ "功能5": "https://map.baidu.com/" }]},{companyName: "測試1",rpWebShows: [{ "功能1": "https://map.baidu.com/" },{ "功能2": "https://map.baidu.com/" },{ "功能5": "https://map.baidu.com/" }]}]this.companyList = this.rawData.map(item => item.companyName).filter(company => !this.companyList2.includes(company))this.displayCompanyList = [...this.companyList]this.filteredData = this.rawDatathis.loading = false},

2.初始化el-table

?采用v-solt的定義el-table內的結構，并命名為scope，采用v-for語法，實現將companyList2和displayCompanyList內的數據，轉換為列。

  <el-table v-loading="loading" border :data="tableData" style="width: 100%" :header-cell-style="{background:'#f5f7fa',color:'#606266'}"><el-table-column prop="functionName" label="功能名稱" width="120" fixed/><el-table-column prop="functionName2" label="功能名稱2" width="120" fixed/><!-- 動態渲染測試列（companyList2） --><el-table-column v-for="(label, index) in companyList2" :key="index" :label="label" :width="120"><template v-slot="scope"><div class="clickable-cell2" @click="handleCellClick(scope.row.functionName, label, scope.row[`test${index + 1}`])">{{ scope.row[`test${index + 1}`] || '/' }}</div></template></el-table-column><el-table-column v-for="company in displayCompanyList" :key="company" :label="company" :prop="company"><template v-slot="scope"><div v-if="scope.row[company]" class="clickable-cell" @click="openContentWindow(scope.row.functionName, company, scope.row[company])">{{ scope.row[company] }}</div><div v-else>-</div></template></el-table-column></el-table>

3.數據解析

  computed: {tableData() {const data = this.filteredData !== null ? this.filteredData : this.rawDataif (!data || !Array.isArray(data)) return []const allFunctions = new Set()data.forEach(company => {if (company.rpWebShows && Array.isArray(company.rpWebShows)) {company.rpWebShows.forEach(item => {const functionName = Object.keys(item)[0]if (functionName) allFunctions.add(functionName)})}})this.functionList = Array.from(allFunctions)const result = []this.functionList.forEach(func => {const row = { functionName: func, functionName2: `${func}2` }this.companyList2.forEach((label, index) => {const testCompanyData = data.find(item => item.companyName === label)if (testCompanyData && testCompanyData.rpWebShows) {const funcData = testCompanyData.rpWebShows.find(item => Object.keys(item)[0] === func)row[`test${index + 1}`] = funcData ? funcData[func] : null} else {row[`test${index + 1}`] = null}})this.displayCompanyList.forEach(company => {const companyData = data.find(item => item.companyName === company)if (companyData && companyData.rpWebShows) {const funcData = companyData.rpWebShows.find(item => Object.keys(item)[0] === func)row[company] = funcData ? funcData[func] : null} else {row[company] = null}})result.push(row)})return result}}

4.附件1（數據模型）

<template><div class="app-container"><div style="margin-bottom: 16px; display: flex; align-items: center;"><span style="margin-right: 8px;">公司名稱</span><el-select v-model="searchCompany" placeholder="請選擇" clearable style="width: 200px; margin-right: 8px;"><el-optionv-for="company in companyList":key="company":label="company":value="company"/></el-select><el-button type="primary" @click="handleSearch">搜索</el-button><el-button @click="handleReset" style="margin-left: 8px;">重置</el-button></div><el-table v-loading="loading" :data="tableData" border style="width: 100%":header-cell-style="{background:'#f5f7fa',color:'#606266'}"><el-table-column prop="functionName" label="功能名稱" width="120" fixed/><el-table-column v-for="company in displayCompanyList" :key="company" :label="company" :prop="company"><template v-slot="scope"><div v-if="scope.row[company]" class="clickable-cell" @click="openContentWindow(scope.row.functionName, company, scope.row[company])">{{ scope.row[company] }}</div><div v-else></div></template></el-table-column></el-table></div>
</template><script>
export default {name: "FunctionUrlMatrix",data() {return {loading: false,companyList: [],functionList: [],rawData: null,searchCompany: '',filteredData: null,displayCompanyList: []}},computed: {tableData() {const data = this.filteredData !== null ? this.filteredData : this.rawData;if (!data) return [];const result = []; this.functionList.forEach(func => {const row = { functionName: func };this.companyList.forEach(company => {const companyData = data.find(item => item.companyName === company);if (companyData && companyData.rpWebShows) {const funcData = companyData.rpWebShows.find(item => item.requestName === func);row[company] = funcData ? funcData.requestUrl : null;} else {row[company] = null;}});result.push(row);});return result;}},created() {this.loadData();},methods: {loadData() {this.loading = true;// 使用本地模擬數據替代API請求this.rawData = [{companyName: "公司A",rpWebShows: [{ requestName: "功能1", requestUrl: "https://company-a.com/func1" },{ requestName: "功能2", requestUrl: "https://company-a.com/func2" },{ requestName: "功能3", requestUrl: "https://company-a.com/func3" }]},{companyName: "公司B",rpWebShows: [{ requestName: "功能1", requestUrl: "https://company-b.com/func1" },{ requestName: "功能3", requestUrl: "https://company-b.com/func3" },{ requestName: "功能4", requestUrl: "https://company-b.com/func4" }]},{companyName: "公司C",rpWebShows: [{ requestName: "功能2", requestUrl: "https://company-c.com/func2" },{ requestName: "功能3", requestUrl: "https://company-c.com/func3" },{ requestName: "功能5", requestUrl: "https://company-c.com/func5" }]}];this.extractCompanyAndFunctionList();this.loading = false;this.filteredData = this.rawData;},extractCompanyAndFunctionList() {if (!this.rawData || !Array.isArray(this.rawData)) {console.error('無效的數據結構:', this.rawData);return;}this.companyList = this.rawData.map(item => item.companyName).filter(Boolean);this.displayCompanyList = [...this.companyList];const allFunctions = new Set();this.rawData.forEach(company => {if (company.rpWebShows && Array.isArray(company.rpWebShows)) {company.rpWebShows.forEach(func => {if (func && func.requestName) {allFunctions.add(func.requestName);}});console.log(allFunctions);} else {console.warn('公司數據缺少rpWebShows或格式不正確:', company);}});this.functionList = Array.from(allFunctions);console.log("111111111");console.log(this.functionList);},handleSearch() {if (!this.searchCompany) {this.filteredData = this.rawData;this.displayCompanyList = [...this.companyList];return;}this.filteredData = this.rawData.filter(item => item.companyName === this.searchCompany);this.displayCompanyList = [this.searchCompany];},handleReset() {this.searchCompany = '';this.filteredData = this.rawData;this.displayCompanyList = [...this.companyList];},openContentWindow(functionName, company, url) {// 實際環境中使用路由，這里改為直接打開URLwindow.open(url, '_blank');}}
}
</script><style scoped>
.el-table {margin-top: 20px;
}
.el-link {margin-right: 10px;
}.clickable-cell {color: #1890ff;cursor: pointer;text-decoration: underline;
}.clickable-cell:hover {color: #40a9ff;
}
</style>

5.附件2（數據字典）

<template><div class="app-container"><div style="margin-bottom: 16px; display: flex; align-items: center;"><span style="margin-right: 8px;">公司名稱</span><el-select v-model="searchCompany" placeholder="請選擇" clearable style="width: 200px; margin-right: 8px;"><el-optionv-for="company in companyList":key="company":label="company":value="company"/></el-select><el-button type="primary" @click="handleSearch">搜索</el-button><el-button @click="handleReset" style="margin-left: 8px;">重置</el-button></div><el-table v-loading="loading" :data="tableData" border style="width: 100%":header-cell-style="{background:'#f5f7fa',color:'#606266'}"><el-table-column prop="functionName" label="功能名稱" width="120" fixed/><el-table-column v-for="company in displayCompanyList" :key="company" :label="company" :prop="company"><template v-slot="scope"><div v-if="scope.row[company]" class="clickable-cell" @click="openContentWindow(scope.row.functionName, company, scope.row[company])">{{ scope.row[company] }}</div><div v-else></div></template></el-table-column></el-table></div>
</template><script>
export default {name: "FunctionUrlMatrix",data() {return {loading: false,companyList: [],functionList: [],rawData: null,searchCompany: '',filteredData: null,displayCompanyList: []}},computed: {tableData() {const data = this.filteredData !== null ? this.filteredData : this.rawData;if (!data) return [];const result = []; this.functionList.forEach(func => {const row = { functionName: func };this.companyList.forEach(company => {const companyData = data.find(item => item.companyName === company);if (companyData && companyData.rpWebShows) {// 保持原始數據結構不變，從對象中提取功能名稱和URLconst funcData = companyData.rpWebShows.find(item => {const key = Object.keys(item)[0];return key === func;});row[company] = funcData ? funcData[func] : null;} else {row[company] = null;}});result.push(row);});return result;}},created() {this.loadData();},methods: {loadData() {this.loading = true;// 使用原始數據結構，不做修改this.rawData = [{companyName: "公司A",rpWebShows: [{ "功能1": "https://company-a.com/func1" },{ "功能2": "https://company-a.com/func2" },{ "功能3": "https://company-a.com/func3" }]},{companyName: "公司B",rpWebShows: [{ "功能1": "https://company-b.com/func1" },{ "功能3": "https://company-b.com/func3" },{ "功能4": "https://company-b.com/func4" }]},{companyName: "公司C",rpWebShows: [{ "功能2": "https://company-c.com/func2" },{ "功能3": "https://company-c.com/func3" },{ "功能5": "https://company-c.com/func5" }]}];this.extractCompanyAndFunctionList();this.loading = false;this.filteredData = this.rawData;},extractCompanyAndFunctionList() {if (!this.rawData || !Array.isArray(this.rawData)) {console.error('無效的數據結構:', this.rawData);return;}this.companyList = this.rawData.map(item => item.companyName).filter(Boolean);this.displayCompanyList = [...this.companyList];const allFunctions = new Set();this.rawData.forEach(company => {if (company.rpWebShows && Array.isArray(company.rpWebShows)) {company.rpWebShows.forEach(func => {// 從對象結構中提取功能名稱const functionName = Object.keys(func)[0];if (functionName) {allFunctions.add(functionName);}});} else {console.warn('公司數據缺少rpWebShows或格式不正確:', company);}});this.functionList = Array.from(allFunctions);},handleSearch() {if (!this.searchCompany) {this.filteredData = this.rawData;this.displayCompanyList = [...this.companyList];return;}this.filteredData = this.rawData.filter(item => item.companyName === this.searchCompany);this.displayCompanyList = [this.searchCompany];},handleReset() {this.searchCompany = '';this.filteredData = this.rawData;this.displayCompanyList = [...this.companyList];},openContentWindow(functionName, company, url) {window.open(url, '_blank');}}
}
</script><style scoped>
.el-table {margin-top: 20px;
}
.el-link {margin-right: 10px;
}.clickable-cell {color: #1890ff;cursor: pointer;text-decoration: underline;
}.clickable-cell:hover {color: #40a9ff;
}
</style>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/82545.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/82545.shtml
英文地址，請注明出處：http://en.pswp.cn/web/82545.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Kerberos面試內容整理-Kerberos 與 LDAP/Active Directory 的集成

Kerberos面試內容整理-Kerberos 與 LDAP/Active Directory 的集成

Kerberos 通常不會單獨存在于企業環境中，而是與目錄服務相結合以提供完整的身份管理方案。其中，Active Directory (AD) 是 Kerberos 集成應用的典型代表。Active Directory 是微軟的目錄服務，實現了 LDAP（輕量級目錄訪問協議）目錄和 Kerberos 認證的融合。在 AD 域控制器上…
閱讀更多...
Oracle DG庫控制文件IO錯誤導致宕機的應急處理

Oracle DG庫控制文件IO錯誤導致宕機的應急處理

Oracle DG庫控制文件IO錯誤導致宕機的應急處理 事故現場偷天換日棋差一招事故現場 一套Oracle 19c DG環境的備庫宕機。 根據告警時間檢查實例宕機時間點附近的alert日志有如下重要信息： 2025-05-25T23:34:10.705385+08:00 KCF: read, write or open error, block=0x3377ee …
閱讀更多...
《前端面試題：前端盒模型》

《前端面試題：前端盒模型》

前端盒模型完全指南&#xff1a;從原理到面試實戰 &#x1f381; 端午快樂&#xff01; 各位前端小伙伴&#xff0c;端午節快樂&#xff01;&#x1f96e; 在這個粽葉飄香的時節&#xff0c;愿你的代碼如龍舟般一往無前&#xff0c;bug 如咸蛋黃般被完美包裹&#xff01;今天我…
閱讀更多...
BERT：讓AI真正“讀懂”語言的革命

BERT：讓AI真正“讀懂”語言的革命

BERT&#xff1a;讓AI真正“讀懂”語言的革命 ——圖解谷歌神作《BERT: Pre-training of Deep Bidirectional Transformers》 2018年&#xff0c;谷歌AI團隊扔出一篇核彈級論文&#xff0c;引爆了整個NLP領域。這個叫BERT的模型在11項任務中屠榜&#xff0c;甚至超越人類表現…
閱讀更多...
爬蟲入門：從基礎到實戰全攻略

爬蟲入門：從基礎到實戰全攻略

&#x1f9e0; 一、爬蟲基礎概念 1.1 爬蟲定義 爬蟲&#xff08;Web Crawler&#xff09;是模擬瀏覽器行為&#xff0c;自動向服務器發送請求并獲取響應數據的一種程序。主要用于從網頁中提取結構化數據&#xff0c;供后續分析、展示或存儲使用。 1.2 爬蟲特點 數據碎片化&…
閱讀更多...
uni-app學習筆記二十一--pages.json中tabBar設置底部菜單項和圖標

uni-app學習筆記二十一--pages.json中tabBar設置底部菜單項和圖標

如果應用是一個多 tab 應用&#xff0c;可以通過 tabBar 配置項指定一級導航欄&#xff0c;以及 tab 切換時顯示的對應頁。 在 pages.json 中提供 tabBar 配置&#xff0c;不僅僅是為了方便快速開發導航&#xff0c;更重要的是在App和小程序端提升性能。在這兩個平臺&#xff…
閱讀更多...
行業分析---小米汽車2025第一季度財報

行業分析---小米汽車2025第一季度財報

1 背景 最近幾年是新能源汽車的淘汰賽&#xff0c;前短時間比亞迪再次開始了降價&#xff0c;導致一片上市車企的股價大跌&#xff0c;足見車圈現在的敏感度。因此筆者會一直跟蹤新勢力車企的財報狀況&#xff0c;對之前財報分析感興趣的讀者朋友可以參考以下博客&#xff1a;…
閱讀更多...
Python 解釋器安裝全攻略（適用于 Linux / Windows / macOS）

Python 解釋器安裝全攻略（適用于 Linux / Windows / macOS）

目錄 一、Windows安裝Python解釋器1.1 下載并安裝Python解釋1.2 測試安裝是否成功1.3 設置pip的國內鏡像------永久配置 二、macOS安裝Python解釋器三、Linux下安裝Python解釋器3.1 Rocky8.10/Rocky9.5安裝Python解釋器3.2 Ubuntu2204/Ubuntu2404安裝Python解釋器3.3 設置pip的…
閱讀更多...
考研系列—操作系統：沖刺筆記（1-3章）

考研系列—操作系統：沖刺筆記（1-3章）

目錄 第一章 計算機系統概述 1.基本概念 2.內核態和用戶態 3.中斷(外中斷)、異常(內中斷-與當前執行的) 4.系統調用 5.操作系統引導程序 2021年真題： 6.操作系統結構 大綱新增 (1)分層結構 (2)模塊化 (3)外核 7.虛擬機 第二章 進程管理 1.畫作業運行的順序和甘…
閱讀更多...
監控 100 臺服務器磁盤內存CPU利用率

監控 100 臺服務器磁盤內存CPU利用率

監控 100 臺服務器磁盤,內存&#xff0c;CPU利用率腳本 以下是一個優化后的監控腳本&#xff0c;用于同時監控100臺服務器的磁盤、內存和CPU利用率&#xff0c;并支持并發執行以提高效率&#xff1a; #!/bin/bash # 服務器監控腳本 - 支持并發獲取100臺服務器系統指標 # 功能…
閱讀更多...
[5-02-04].第01節：Jmeter環境搭建：

[5-02-04].第01節：Jmeter環境搭建：

JMeter筆記大綱 Jmeter依賴于JDK&#xff0c;所以必須確保當前計算機上已經安裝了JDK&#xff0c;并且配置了環境變量 一、JMeter概述&#xff1a; 1.1.JMeter是什么&#xff1a; JMeter是Appache組織使用java開發的一款測試工具 可以用于對服務器、網絡或對象模擬巨大的負載…
閱讀更多...
【獸醫處方專用軟件】佳易王獸醫電子處方軟件：高效智能的寵物診療管理方案

【獸醫處方專用軟件】佳易王獸醫電子處方軟件：高效智能的寵物診療管理方案

一、軟件概述與核心優勢 &#xff08;一&#xff09;試用版獲取方式 資源下載路徑&#xff1a;進入博主頭像主頁第一篇文章末尾&#xff0c;點擊卡片按鈕&#xff1b;或訪問左上角博客主頁&#xff0c;通過右側按鈕獲取詳細資料。 說明&#xff1a;下載文件為壓縮包&#xff…
閱讀更多...
MapReduce(期末速成版)

MapReduce(期末速成版)

起初在B站看3分鐘的速成視頻&#xff0c;感覺很多細節沒聽懂。 具體例子解析(文件內容去重) 對于兩個輸入文件&#xff0c;即文件A 和文件B&#xff0c;請編寫MapReduce 程序&#xff0c;對兩個文件進行合并&#xff0c;并剔除 其中重復的內容&#xff0c;得到一個新的輸出文件…
閱讀更多...
Java高級 | 【實驗四】Springboot 獲取前端數據與返回Json數據

Java高級 | 【實驗四】Springboot 獲取前端數據與返回Json數據

隸屬文章&#xff1a; Java高級 | &#xff08;二十二&#xff09;Java常用類庫-CSDN博客 系列文章&#xff1a; Java高級 | 【實驗一】Spring Boot安裝及測試 最新-CSDN博客 Java高級 | 【實驗二】Springboot 控制器類相關注解知識-CSDN博客 Java高級 | 【實驗三】Springboot …
閱讀更多...
從零打造AI面試系統全棧開發

從零打造AI面試系統全棧開發

&#x1f916; AI面試系統開發完整教程 &#x1f4cb; 項目概述 本教程將帶你從零開始構建一個完整的AI面試系統&#xff0c;包含前端、后端、AI集成和部署的全流程。 源碼地址 技術棧 前端: React TypeScript Vite Vaadin Components后端: Spring Boot Spring Securi…
閱讀更多...
【硬件】PCIe協議 | 電腦的高速公路

【硬件】PCIe協議 | 電腦的高速公路

文章目錄 PCIe | 外圍設備高速互聯通道&#xff08;peripheral component interconnect express&#xff09;的核心概念和應用 基礎概念 1.1 電腦內的”高速“&#xff0c;連接CPU、顯卡、SSD&#xff08;固態硬盤&#xff09;等核心組件&#xff1b;數據傳輸速度極快&#xff…
閱讀更多...
【 Redis | 完結篇 緩存優化 】

【 Redis | 完結篇 緩存優化 】

前言&#xff1a;本節包含常見redis緩存問題&#xff0c;包含緩存一致性問題&#xff0c;緩存雪崩&#xff0c;緩存穿透&#xff0c;緩存擊穿問題及其解決方案 1. 緩存一致性 我們先看下目前企業用的最多的緩存模型。緩存的通用模型有三種&#xff1a; 緩存模型解釋Cache Asi…
閱讀更多...
MySQL訪問控制與賬號管理：原理、技術與最佳實踐

MySQL訪問控制與賬號管理：原理、技術與最佳實踐

MySQL的安全體系建立在精細的訪問控制和賬號管理機制上。本文基于MySQL 9.3官方文檔，深入解析其核心原理、關鍵技術、實用技巧和行業最佳實踐。 一、訪問控制核心原理：雙重驗證機制 連接驗證 (Connection Verification) 客戶端發起連接時，MySQL依據user_name@host_name組合進…
閱讀更多...
Go語言爬蟲系列教程4：使用正則表達式解析HTML內容

Go語言爬蟲系列教程4：使用正則表達式解析HTML內容

Go語言爬蟲系列教程4&#xff1a;使用正則表達式解析HTML內容 正則表達式&#xff08;Regular Expression&#xff0c;簡稱RegEx&#xff09;是處理文本數據的利器。在網絡爬蟲中&#xff0c;我們經常需要從HTML頁面中提取特定的信息&#xff0c;正則表達式就像一個智能的&quo…
閱讀更多...
筆記 | docker構建失敗

筆記 | docker構建失敗

筆記 | docker構建失敗 構建報錯LOG1 rootThinkPad-FLY:/mnt/e/02-docker/ubunutu-vm# docker build -t ubuntu16.04:v1 . [] Building 714.5s (6/11) docker:default> [internal] load …
閱讀更多...
最新文章

Copyright @ 2022~2023