vue树形结构如何父级和子级字段名不一样如何渲染数据

在Vue中，如果你需要处理树形结构的数据，并且父节点和子节点的字段名称不一致，你可以通过计算属性或手动映射对象来解决这个问题。这里是一个简单的示例：

假设你有如下的数据结构：

{
  "root": {
    "_id": "parent1",
    "name": "父节点1",
    "children": [
      {
        "_refId": "child1", // 子节点实际ID，但API返回的是_refId
        "parentId": "parent1", // 实际字段名是parentId
        "title": "子节点1"
      },
      {
        "_refId": "child2",
        "parentId": "parent1",
        "name": "子节点2" // 父节点和子节点的字段名在这部分不一致
      }
    ]
  }
}

你可以创建一个计算属性或者在模板中使用`v-for`遍历时做一次转换，例如：

**计算属性的方式：**

// 示例组件里
export default {
  computed: {
    formattedData() {
      return this.root.children.map(child => ({
        id: child._refId,
        title: child.title,
        parentTitle: this.findParentTitleById(child.parentId), // 自定义查找父标题的方法
      }));
    },
  },
  methods: {
    findParentTitleById(id) {
      // 根据_id查找对应的父节点并获取name字段值
    }
  }
};

**模板渲染的方式：**

<template>
  <ul>
    <li v-for="node in formattedData">
      {{ node.id }} - {{ node.title }}
      <ul>
        <li v-for="subNode in node.children" :key="subNode._refId">
          {{ subNode._refId }} - {{ subNode.title }}
        </li>
      </ul>
    </li>
  </ul>
</template>

在这个例子中，我们在遍历子节点之前，已经将数据格式化成了统一的键值对，避免了直接引用父级字段名的问题。