在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);

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue2 对 `el-table` 表格的输入框字段进行校验,可以使用自定义校验规则和事件处理函数来实现。以下是一个简单的示例: ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓名"> <template slot-scope="scope"> <el-input v-model="scope.row.name" @blur="validateName(scope.row)" :error="scope.row.nameError"></el-input> </template> </el-table-column> <el-table-column prop="age" label="年龄"> <template slot-scope="scope"> <el-input v-model.number="scope.row.age" @blur="validateAge(scope.row)" :error="scope.row.ageError"></el-input> </template> </el-table-column> </el-table> ``` 在上面的示例,我们使用了 `el-input` 组件作为表格的输入框,并通过 `v-model` 指令绑定到表格数据字段。同时,我们还为输入框绑定了 `blur` 事件,用于在输入框失去焦点时进行校验。 接下来,我们需要在 Vue 实例定义校验规则和事件处理函数: ```javascript export default { data() { return { tableData: [ { name: '', age: '' }, { name: '', age: '' } ] } }, methods: { validateName(row) { if (!row.name) { row.nameError = '姓名不能为空' } else { row.nameError = '' } }, validateAge(row) { if (!row.age) { row.ageError = '年龄不能为空' } else if (isNaN(row.age) || row.age < 0 || row.age > 150) { row.ageError = '年龄必须是0到150之间的数字' } else { row.ageError = '' } } } } ``` 在上面的示例,我们分别定义了 `validateName` 和 `validateAge` 两个事件处理函数,用于对姓名和年龄字段进行校验。在这两个函数,我们根据字段的值进行不同的校验操作,并将校验结果保存到表格数据的 `nameError` 和 `ageError` 字段表格数据的 `error` 属性可以用于控制输入框下方的错误提示信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值