Vue.js实现父级ID/名称仅单次显示的问题求助

问题根源 #

你在模板里用:set="currentId = loop.id"直接修改变量，这违反了Vue的模板渲染规范——模板只负责数据展示，不能包含赋值这类副作用操作，所以控制台会抛出警告。

正确实现方案 #

1. 预处理数据（推荐） #

提前把多维父子数组处理成带标识的一维结构，标记哪些行需要显示父级内容：

// 假设原始父子结构数据如下
const originalData = [
  { id: 1, name: '父级1', children: [{ id: 11, name: '子项1-1' }, { id: 12, name: '子项1-2' }] },
  { id: 2, name: '父级2', children: [{ id: 21, name: '子项2-1' }] }
];

// 扁平化并添加显示标识、合并行数
const processedData = [];
originalData.forEach(parent => {
  const childCount = parent.children.length;
  parent.children.forEach((child, idx) => {
    processedData.push({
      ...child,
      parentId: parent.id,
      parentName: parent.name,
      showParent: idx === 0, // 仅父级下第一个子项显示父级信息
      mergeRow: childCount // 父级单元格需要合并的行数
    });
  });
});

// 将处理后的数据赋值给组件data中的tableData
this.tableData = processedData;

2. 模板渲染 #

用预处理好的标识控制显示，同时利用rowspan实现单元格合并：

<table border="1">
  <thead>
    <tr>
      <th>父级ID</th>
      <th>父级名称</th>
      <th>子项ID</th>
      <th>子项名称</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in tableData" :key="item.id">
      <td v-if="item.showParent" :rowspan="item.mergeRow">{{ item.parentId }}</td>
      <td v-if="item.showParent" :rowspan="item.mergeRow">{{ item.parentName }}</td>
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
    </tr>
  </tbody>
</table>

3. 模板内临时变量的合规写法（应急方案） #

如果不想预处理数据，可通过组件方法跟踪父级ID：

<template>
  <table border="1">
    <tbody>
      <tr v-for="item in flatData" :key="item.id">
        <td v-if="showParent(item.parentId)" class="text-center">{{ item.parentId }}</td>
        <td v-else></td>
        <!-- 父级名称列同理 -->
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      flatData: [], // 先将父子数组扁平化，子项带parentId
      lastParentId: null
    };
  },
  methods: {
    showParent(parentId) {
      if (parentId !== this.lastParentId) {
        this.lastParentId = parentId;
        return true;
      }
      return false;
    }
  },
  created() {
    // 这里完成数组扁平化逻辑
  }
};
</script>

核心提醒 #

• 绝对不要在Vue模板指令里直接做赋值操作，这会破坏单向数据流，引发渲染异常和警告。
• 预处理数据是最稳妥的方案，逻辑清晰且符合Vue设计理念。

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