问:
[
{
"id": 1,
"pid": 0,
"sourceId": 100300264,
"sourcePid": 0,
"title": "图片",
"status": 2,
"iconUrl": "",
"ranking": 9,
"isAutoCapture": 1,
"updateFlag": 0,
"showType": 1,
"images": "",
"children": [
{
"id": 12,
"pid": 1,
"sourceId": 100342142,
"sourcePid": 100300264,
"title": "图片2011",
"status": 2,
"iconUrl": "",
"ranking": 1,
"isAutoCapture": 1,
"updateFlag": 0,
"children": []
},
{
"id": 13,
"pid": 1,
"sourceId": 100329097,
"sourcePid": 100300264,
"title": "一周新闻人物",
"status": 2,
"iconUrl": "",
"ranking": 2,
"isAutoCapture": 1,
"updateFlag": 0,
"children": []
},
{
"id": 14,
"pid": 1,
"sourceId": 100320337,
"sourcePid": 100300264,
"title": "图记",
"status": 2,
"iconUrl": "",
"ranking": 3,
"isAutoCapture": 1,
"updateFlag": 0,
"children": []
},
{
"id": 15,
"pid": 1,
"sourceId": 100320336,
"sourcePid": 100300264,
"title": "xxxx",
"status": 2,
"iconUrl": "",
"ranking": 4,
"isAutoCapture": 1,
"updateFlag": 0,
"children": []
},
]
}
]这是后端请求回来的数据,
下面是el-table表格对应scope.row的接口数据:
{
"id": 1108,
"adId": 1234,
"adAdvertisingPage": 1,
"channelId": 1,
"categoryId": 13,
"topicId": 1111,
"adPosition": 1,
"adType": 3,
"proportion": 0,
"comment": "",
"versionType": 0,
"version": "",
"appType": 0,
"status": 1,
"createTime": "2024-03-27 14:54:04",
"updateTime": "2024-03-28 15:55:09",
"operationPerson": ""
}我需要表格数据中的channelId和categoryId,
然后在el-table表格中:
<!-- 频道 -->
<el-table-column prop="channelId" label="频道">
<template slot-scope="scope">
</template>
</el-table-column>
<!-- 栏目 -->
<el-table-column prop="categoryId" label="栏目">
<template slot-scope="scope">
</template>
</el-table-column>展示响应数据的文字
回答:
<el-table :data="yourData">
<!-- 频道 -->
<el-table-column prop="channelId" label="频道">
<template slot-scope="scope">
{{ getChannelText(scope.row.channelId) }}
</template>
</el-table-column>
<!-- 栏目 -->
<el-table-column prop="categoryId" label="栏目">
<template slot-scope="scope">
{{ getCategoryText(scope.row.categoryId) }}
</template>
</el-table-column>
</el-table>
// 假设您有一个映射关系的字典
const channelMap = {
1: '频道1',
2: '频道2',
// 其他频道的映射关系
};
const categoryMap = {
13: '栏目1',
14: '栏目2',
// 其他栏目的映射关系
};
// 在Vue实例中定义方法
methods: {
getChannelText(channelId) {
return channelMap[channelId] || '未知频道';
},
getCategoryText(categoryId) {
return categoryMap[categoryId] || '未知栏目';
}
}
随后产生的问题:
回答:
您可以使用 JavaScript 来遍历给定的数据,并创建一个字典,将每个对象的 id 对应为 key,title 对应为 value。以下是一个简单的示例代码:
// 给定的数据
const data = [
{
"id": 1,
"pid": 0,
"sourceId": 100300264,
"sourcePid": 0,
"title": "图片",
"status": 2,
"iconUrl": "",
"ranking": 9,
"isAutoCapture": 1,
"updateFlag": 0,
"showType": 1,
"images": ""
}, {
"id": 2,
"pid": 0,
"sourceId": 100300263,
"sourcePid": 0,
"title": "视频",
"status": 2,
"iconUrl": "",
"ranking": 11,
"isAutoCapture": 1,
"updateFlag": 0,
"showType": 1,
"images": ""
}
];
// 创建一个空字典
const dictionary = {};
// 遍历数据,并将 id 和 title 存入字典
data.forEach(item => {
dictionary[item.id] = item.title;
});
// 打印字典
console.log(dictionary);