Vuetify - 如何在 v-treeview 中对齐行？

Question

Vue js 的新手，所以如果这是一个无知的问题，请原谅。我已经搜索了所有内容，似乎无法弄清楚这一点。

我有一个带有文件夹结构的 v-treeview，以及第二列中每个文件夹的描述。我无法让 Description 列与 Browse 列在同一行中对齐。

如何让我的第二列与树视图对齐？

我的代码如下：

<v-layout>
  <v-flex xs12 sm4 justify-center>
    <h4>Browse</h4>
    <v-treeview
      v-model="selectedSelectableNodes"
      :items="rootStructure"
      item-key="path"
      item-text=""
      :search="search"
      :filter="customFilter"
      :open="open"
    >
    </v-treeview>
  </v-flex>

  <v-flex xs12 sm3 justify-center>
    <h4>Description</h4>
    <ul v-for="(item, i) in description" :key="i">
      <li><v-chip :color="colorCycle[(i+1) % 4]" outlined>{{ item }}</v-chip></li>
      <br/>
    </ul>
  </v-flex>

Answer 1

一种解决方法是将.v-treeview-node__root 类应用于<ul>，并将.v-treeview-node 应用于<li>，以便它们继承与TreeView 节点相同的样式：

<ul class="v-treeview-node__root" v-for="(item, i) in description" :key="i">
  <li class="v-treeview-node">
    <v-chip :color="colorCycle[(i + 1) % 4]" outlined>{{item}}</v-chip>
  </li>
  <br />
</ul>

demo