Vue.js如何适配动态变化的数据库表结构获取数据列？

1. 动态列赋值：遍历对象键值对 #

后端返回的r.data[0]是对象类型（不是数组），无法通过数组索引循环，需要遍历对象的键值对完成动态赋值：

方法一：for...in遍历实现

async getAmbalariForProduct(productId) {
    let ambalareProps = this.header.model;
    const r = await axios.get(`../../api/products/GetProdusAmbalare/${productId}`);
    
    if (r.data.length >= 1) {
        const firstItem = r.data[0];
        // 遍历对象自身属性，排除继承属性
        for (const key in firstItem) {
            if (firstItem.hasOwnProperty(key)) {
                // Vue 2新增属性需用Vue.set(ambalareProps, key, firstItem[key])触发响应式
                ambalareProps[key] = firstItem[key];
            }
        }
    }
},

方法二：Object.entries简化遍历

async getAmbalariForProduct(productId) {
    let ambalareProps = this.header.model;
    const r = await axios.get(`../../api/products/GetProdusAmbalare/${productId}`);
    
    if (r.data.length >= 1) {
        // 解构键值对直接赋值
        Object.entries(r.data[0]).forEach(([key, value]) => {
            // Vue 3直接赋值即可触发响应式，Vue 2新增属性用Vue.set
            ambalareProps[key] = value;
        });
    }
},

2. 解决多行数据覆盖问题 #

如果后端返回多条数据，直接合并到单个对象会导致后行覆盖前行，需根据需求处理：

需求1：保留所有返回数据

将ambalareProps定义为数组，存储所有返回对象：

async getAmbalariForProduct(productId) {
    // 初始化数组清空原有数据
    this.header.model = [];
    const r = await axios.get(`../../api/products/GetProdusAmbalare/${productId}`);
    
    if (r.data.length >= 1) {
        // 直接存入所有数据，或用map做自定义处理
        this.header.model = [...r.data];
        // 示例：给每条数据添加自定义属性
        // this.header.model = r.data.map(item => ({ ...item, status: 'loaded' }));
    }
},

需求2：仅保留第一条数据

使用前面的动态赋值方法即可，只处理r.data[0]，不会出现覆盖问题。

注意事项 #

• Vue 2中给对象新增属性时，需用Vue.set(target, key, value)触发响应式更新；Vue 3使用reactive/ref定义对象，直接赋值即可。
• 确保后端返回的所有数据结构一致（要么是表A结构，要么是表B结构），避免混合结构导致数据混乱。

内容的提问来源于stack exchange，提问作者Roman Claudiu