Question

我从后端API（JSON）中获得了一些复杂的数据（很丑！），我试图在HTML表中正确显示它们。表中有一些未正确排列的有序列表项。

例如，注意屏幕截图中的2.1, 2.2等项目如何放置在1.下。应将其向下移动一个插槽至其各自的编号列表。我了解API的数据也不正确。我正在寻找对此的演示文稿修复。

有什么办法解决吗？

<template>
<div>

  <table>
    <!-- <tr v-if='eg[0].type == "ExREF"'> -->
      <tr>
      <th>General:</th>
      <td>
        <ol><li v-for='(item, index) in eg' v-if='item.type == "ExREF"' :key='index'>{{item["General Considerations Guidance"]}}</li></ol>
      </td>
    </tr>
    <tr>
      <th>Considerations:</th>
      <td>
        <ol>
          <li v-for='(item, index) in eg' v-if='item.type == "Extract"' :key='index'>
            {{item["General Considerations Guidance"]}}
            <ol>
              <li v-for='(a, index) in item.Nodes' :key='index' type='a'>
                <em>{{a.Node}}</em> {{a["General Considerations Guidance"]}}
                  <ol>
                    <li v-for='(i, index) in a.Nodes' :key='index' type='i'>
                      <em>{{i.Node}}</em>{{i["General Considerations Guidance"]}}
                    </li>
                  </ol>
              </li>
            </ol>
          </li>
        </ol>
      </td>
    </tr>
  </table>

</div>
</template>

Answer 1

您可以按以下方式对文本标题节点进行排序：

展平节点-取消所有节点的分组，使它们的深度相同，从而便于排序
排序节点-按类型和标题编号对节点进行排序
分组节点-给定排序列表，将节点分组在适当的标题下

然后，使用computed property（例如，名为“ egSorted”）返回已排序的输入（eg）：

import { sortNodes } from './tree.js';

export default {
  data() {
    return {
      eg: [...]
    };
  },
  computed: {
    egSorted() {
      return sortNodes(this.eg);
    }
  }
}

然后在模板中，将eg替换为egSorted。

demo

嵌套的v-for循环和错误的数据放置

1 个答案: