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

在Vue.js中，如果你的数据模型（通常是JSON对象数组）的父节点和子节点的属性名称不同，你可以在模板中通过`v-bind`或者简写`:`来映射数据。这里有一个简单的例子：

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

[
    {
      id: "parent1",
      title: "Parent 1",
      children: [
        { id: "child1", parentId: "parent1", name: "Child 1" },
        { id: "child2", parentId: "parent1", name: "Child 2" }
      ]
    },
    {
      id: "parent2",
      title: "Parent 2",
      children: [
        { id: "child3", parentId: "parent2", childName: "Child 3" },
        { id: "child4", parentId: "parent2", childName: "Child 4" }
      ]
    }
]

你可以这样渲染这个树形结构：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <span>{{ item.title }}</span>
      <ul v-if="item.children">
        <li v-for="(child, childIndex) in item.children" :key="childIndex">
          {{ child[child.isChildFieldName] }} <!-- 这里的isChildFieldName应该替换为你实际的字段名 -->
        </li>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: yourDataArray,
      isChildFieldName: 'name', // 或者是 'childName'，取决于实际数据
    };
  },
};
</script>

在这个示例中，我们使用`v-bind:key`给每个元素设置唯一标识，然后在循环内部检查`item.children`是否存在，如果存在则遍历子项并使用`{{ child[child.isChildFieldName] }}`来访问正确的字段（在这里假设`isChildFieldName`是`name`或者`childName`）。

如果你不确定字段名称，可以使用计算属性动态处理：

computed: {
  formattedChildren(item) {
    return item.children.map(child => child[item.childFieldName]);
  }
},

然后在模板中这样使用：

<li v-for="(item, index) in items" :key="index">
  <span>{{ item.title }}</span>
  <ul v-if="item.children">
    <li v-for="formattedChild of formattedChildren(item)" :key="formattedChild.id">{{ formattedChild }}</li>
  </ul>
</li>