以下代碼中dntag欄位中顯示的每筆數組資料間以大寫分號隔開，垂直排列改成水平排列，每筆數組資料中的id:及dnname:都不顯示：
<template>
<div class="container">
<h1>合并后的数据</h1>
<!
-- 控制面板
-->
<div class="control
-panel">
<button @click="fetchData" class="refresh
-btn">刷新数据</button>
<input
v
-model="searchQuery"
placeholder="搜索..."
class="search
-input"
/>
<div class="pagination
-controls">
<span>每页显示:</span>
<select v
-model="pageSize" class="page
-size
-select">
<option
value="1">1条</option>
<option
value="4">4条</option>
<option
value="10">10条</option>
</select>
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
</div>
</div>
<!
-- 垂直堆叠的数据展示
-->
<div class="vertical
-records" v
-if="filteredData.length > 0">
<div v
-for="(item, index) in paginatedData" :
key="index" class="record
-card">
<div class="record
-header">
<h3>记录 #{{ (currentPage
- 1) * pageSize + index + 1 }}</h3>
</div>
<div class="record
-body">
<div v
-for="(
value,
key) in item" :
key="
key" class="record
-field">
<div class="field
-name">{{
key }}:</div>
<div class="field
-value">
<div v
-if="Array.isArray(
value)" class="array
-value">
<div v
-for="(subItem, subIndex) in
value" :
key="subIndex" class="sub
-item">
<div v
-if="Array.isArray(subItem)" class="sub
-array">
<div v
-for="(val, i) in subItem" :
key="i" class="
key-value-pair">
<span class="
key">{{ val[0] }}:</span>
<span class="
value" v
-html="format
Value(val[1])"></span>
</div>
</div>
<span v
-else v
-html="format
Value(subItem)"></span>
</div>
</div>
<div v
-else v
-html="format
Value(
value)"></div>
</div>
</div>
</div>
</div>
</div>
<div v
-else class="no
-data">
没有找到匹配的数据
</div>
</div>
</template>
<script>
export default {
data() {
return {
api1Data: [],
api2Data: [],
mergedData: [],
currentPage: 1,
pageSize: 1,
searchQuery: '',
sort
Key: '',
sortOrders: {}
};
},
computed: {
filteredData() {
const query = this.searchQuery.toLowerCase();
return this.mergedData.filter(item => {
return Object.
values(item).some(
value => {
if (
value === null ||
value === undefined) return false;
const str
Value = JSON.stringify(
value).toLowerCase();
return str
Value.includes(query);
});
});
},
sortedData() {
if (!this.sort
Key) return this.filteredData;
const order = this.sortOrders[this.sort
Key] || 1;
return [...this.filteredData].sort((a, b) => {
const get
Value = (obj) => {
const val = obj[this.sort
Key];
if (Array.isArray(val)) {
return JSON.stringify(val);
}
return val;
};
const a
Value = get
Value(a);
const b
Value = get
Value(b);
if (a
Value === b
Value) return 0;
return a
Value > b
Value ? order :
-order;
});
},
paginatedData() {
const start = (this.currentPage
- 1) * this.pageSize;
const end = start + this.pageSize;
return this.sortedData.slice(start, end);
},
totalPages() {
return Math.ceil(this.filteredData.length / this.pageSize) || 1;
}
},
methods: {
async fetchData() {
try {
const api1Response = await fetch("MRInfo/?format=json");
this.api1Data = await api1Response.json();
const api2Response = await fetch("DNTag/?format=json");
this.api2Data = await api2Response.json();
this.mergeData();
this.currentPage = 1;
} catch (error) {
console.error("获取数据失败:", error);
}
},
mergeData() {
this.mergedData = this.api1Data.map((item) => {
const newItem = { ...item };
if (newItem.dntag && Array.isArray(newItem.dntag)) {
newItem.dntag = newItem.dntag.map((tagId) => {
const matchedItem = this.api2Data.find(
(api2Item) => api2Item.id === tagId
);
const tagObj = matchedItem || { id: tagId, name: "未找到匹配数据" };
return Object.entries(tagObj).map(([
key,
value]) => [
key,
value]);
});
}
return newItem;
});
this.sortOrders = {};
if (this.mergedData.length > 0) {
Object.
keys(this.mergedData[0]).forEach(
key => {
this.sortOrders[
key] = 1;
});
}
},
format
Value(
value) {
if (
value === null ||
value === undefined) return '';
if (typeof
value === 'string' &&
value.startsWith('http')) {
return `<a href="${
value}" target="_blank">${
value}</a>`;
}
return
value;
},
sortBy(
key) {
this.sort
Key =
key;
this.sortOrders[
key] = this.sortOrders[
key] *
-1;
},
prevPage() {
if (this.currentPage > 1) {
this.currentPage
--;
}
},
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++;
}
}
},
mounted() {
this.fetchData();
}
};
</script>
<style scoped>
.container {
max
-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.control
-panel {
margin
-bottom: 20px;
display:
flex;
flex-wrap: wrap;
gap: 10px;
align
-items: center;
}
.refresh
-btn {
padding: 8px 16px;
background
-color: #4CAF50;
color: white;
border: none;
border
-radius: 4px;
cursor: pointer;
}
.refresh
-btn:hover {
background
-color: #45a049;
}
.search
-input {
padding: 8px;
border: 1px solid #ddd;
border
-radius: 4px;
flex-grow: 1;
max
-width: 300px;
}
.pagination
-controls {
display:
flex;
align
-items: center;
gap: 10px;
}
.page
-size
-select {
padding: 8px;
border
-radius: 4px;
}
/* 垂直记录样式 */
.vertical
-records {
display:
flex;
flex-direction: column;
gap: 20px;
}
.record
-card {
border: 1px solid #ddd;
border
-radius: 4px;
overflow: hidden;
box
-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.record
-header {
padding: 12px 16px;
background
-color: #f5f5f5;
border
-bottom: 1px solid #ddd;
}
.record
-header h3 {
margin: 0;
font
-size: 1.1em;
}
.record
-body {
padding: 16px;
}
.record
-field {
display:
flex;
margin
-bottom: 12px;
line
-height: 1.5;
}
.record
-field:last
-child {
margin
-bottom: 0;
}
.field
-name {
font
-weight: bold;
min
-width: 120px;
color: #555;
}
.field
-value {
flex-grow: 1;
}
.array
-value {
display:
flex;
flex-direction: column;
gap: 8px;
}
.sub
-item {
margin
-bottom: 4px;
}
.sub
-array {
display:
flex;
flex-direction: column;
gap: 4px;
margin
-top: 4px;
}
.
key-value-pair {
display:
flex;
gap: 8px;
}
.
key {
font
-weight: 500;
color: #666;
}
.
value {
word
-break: break
-word;
}
.no
-data {
padding: 20px;
text
-align: center;
color: #666;
font
-style: italic;
}
button:disabled {
opacity: 0.5;
cursor: not
-allowed;
}
</style>
Flex中使用Object实现key-value存储
本文介绍如何在Flex项目中使用Object实现类似Java中Map的key-value存储方式，包括添加、删除、查找和遍历等操作。
扫一扫
1113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
