如何更改 vuetify 的 v-treeview 中项目或节点的高度？答案

【问题标题】：How do you change the height of items or nodes in vuetify's v-treeview?如何更改 vuetify 的 v-treeview 中项目或节点的高度？
【发布时间】：2020-09-05 02:21:37
【问题描述】：

我已经在自定义 css 中尝试了下面的代码，但没有成功

.v-treeview-node__root {
      max-height: 30px;
}

有什么建议吗？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

我相信没有一种简单的方法来设置整个节点的样式（请参阅 Github 上的 issue）但是您可以在节点的标签上添加样式通过使用the label slot of <v-treeview>。

类似这样的：

<v-treeview :items="items" dense>

  <!-- use the `label` slot of `v-treeview` -->
  <template v-slot:label="{ item }">
    <div class="treeview-item">{{ item.name }}</div>
  </template>

</v-treeview>

.treeview-item {
  max-height: 30px;
}

这是codesandbox.的工作演示

【讨论】：

感谢您的回答。我想减少演示中红色边框之间的空间
您可以尝试将dense 属性添加到您的树视图中。
除此之外，我不认为我们可以手动降低每个节点的高度。通过定位 vuetify 生成的类可能是可能的，但这看起来有点脏，所以我不建议这样做。

【解决方案2】：

试试这个：在您的 data 中，您创建一个对象，其中包含您想要的 HTML 或 Vuetify 组件样式，然后像正常编写一样编写 CSS。注意：使用“，”而不是“;”在每个 CSS 属性之后注2：使用驼峰式大小写代替连字符。例如：使用borderTop代替border-top

export default {
name: 'myComponent',
data(): {
    return {
       styles: {
         maxHeight: 30px
}
}
}

然后在 v-treeview 代码中添加：

<v-treeview :style="styles"></v-treeview>

【讨论】：

我试过了。它不起作用。我的目标是每个节点而不是整个组件
添加 v-for 来定位每个节点，如下所示：```

【解决方案3】：

我认为最简洁的方法是使用 SASS 变量，如 official docs 中所述。您只需创建一个名为 variables.scss 的文件并将下一行放入其中：

$treeview-node-height: 30px;

然后应用一些魔法，v-treeview 中的节点高度为 30px。当然应该安装vue-cli-plugin-vuetify。

【讨论】：

【解决方案4】：

如此接近。 min-height 阻止了你。

.v-treeview-node__root {
  min-height: 0px;
  max-height: 25px;
  padding: 0px;
  margin: 0px;
}

【讨论】：