如何在Vue中将这些行转置为列？

Question

我正在尝试通过用户可以选择许多个性特征的方式来重现此表：

我已经做到了，除了我的专栏变成了行！

因此，您会看到，在第二张图片的第一行上，它们应该都出现在标题 Sincerity （<真实性）下，与第一张图片一样-却没有。如何修改此表格使其看起来像第一张图片？

func changeBarButtonTitle() {

        if let leftitem = self.navigationItem.leftBarButtonItem {
            print("Left Button")
            leftitem.title = "test-left"
        }

        if let rightitem = self.navigationItem.rightBarButtonItem {
            print("Right Button")
            rightitem.title = "test-right"
        }
    }

我的数据结构：

<table>
      <tr>
        <th v-for="header in headers" :key="header" v-text="header"/>
      </tr>
      <tr v-for="(column, index) in childs" :key="index">
        <td v-for="item in column" :key="item.id">
          <Child
            :selected="selected.indexOf(item.text) > -1"
            :text="item.text"
            @select="selectItem"
          />
        </td>
      </tr>
    </table>

Answer 1

我建议使用display: flex代替常规表来实现这一点。

使用表格，在每个单元格（td）中，您需要弄清楚上面的标题（th），以便从哪个列表中知道要获取的特征。

使用flex，您可以正确地对列进行分组，并且您的html可以很简单

<div id="app">
  <div class="category" v-for="header in categoryHeaders" :key="header">
    <h2>{{ header }}</h2>
    <ul>
      <li v-for="child in categoryChildren(header)">
        <span>{{ child.text }}</span>
      </li>
    </ul>
  </div>
</div>

唯一将它们放入列的css将是

#app {
  display: flex;
}

对于起初的处理方式，我有一个更完整的jsfiddle here