Vue.js产品表格如何将关联分类ID替换为对应分类名称展示

实现步骤 #

你只需要做2处核心调整即可完成需求：

1. 修复初始化逻辑，加载分类数据

你当前已经封装了拉取分类的listarcategorias方法，但没有在初始化时调用，导致categorias数组为空，自然无法匹配分类名称。修改created钩子：

created() {
    this.listar();
    this.listarcategorias(); // 新增这行，拉取分类数据
}

2. 替换表格分类列的展示逻辑

有三种实现方案，可根据你的实际场景选择：

方案1：直接在模板匹配（适合分类数据量小的场景）

找到表格中分类列的代码，将原来的{{pro.id_categoria}}替换为：

<td>{{ categorias.find(item => item.id_categoria === pro.id_categoria)?.categoria || '未知分类' }}</td>

说明：?.可选链语法用于避免找不到对应分类时报错，|| '未知分类'是兜底显示文案，可按需修改。

方案2：封装为公共方法（代码更易维护）

先在methods中新增匹配方法：

methods: {
    // 原有方法保留，新增下面这个方法
    getCategoriaNombre(id) {
        const target = this.categorias.find(item => item.id_categoria === id)
        return target ? target.categoria : '未知分类'
    }
}

再修改表格分类列：

<td>{{ getCategoriaNombre(pro.id_categoria) }}</td>

方案3：通过Map映射（分类数据量超过100条时推荐，查找效率更高）

先新增计算属性将分类列表转为键值对Map：

computed: {
    categoriaMap() {
        return new Map(this.categorias.map(item => [item.id_categoria, item.categoria]))
    }
}

再修改表格分类列：

<td>{{ categoriaMap.get(pro.id_categoria) || '未知分类' }}</td>

内容的提问来源于stack exchange，提问作者Maicol Rojas