在el-table表格中根据后端返回字段的number数字,动态展示相对应的文字

问:

[
    {
        "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);