Vue.js 如何更改vuetify'中项目或节点的高度；s v-treeview？

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

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

有什么建议吗？

试试这个： 在数据中，您创建了一个包含HTML或Vuetify组件所需样式的对象，然后编写CSS，就像正常编写一样。 注意：在每个CSS属性后使用“，”而不是“；” 注2：使用驼峰格代替连字符。例如：使用

borderTop

代替

borderTop

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

然后在v-treeview代码中添加以下内容：

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

---

我认为没有一种简单的方法可以设置整个节点的样式（请参见Github上的此部分）但是您可以使用在节点标签上添加样式

大概是这样的：

{{item.name}

.treeview项目{
最大高度：30px；
}

---

下面是一个关于

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

$treeview-node-height: 30px;

然后应用一些魔法，v-treeview中的节点高度为30px。

---

当然应该安装。

我已经试过了。它不起作用。我的目标是每个节点，而不是整个组件添加v-for以这样的方式针对每个节点：``谢谢您的回答。我想减少演示中红色边框之间的间距。您可以尝试将

dense

属性添加到树状视图中。除此之外，我不认为我们可以手动减少每个节点的高度。这可能是通过瞄准vuetify生成的类实现的，但这看起来有点脏，所以我不建议这样做。