vuetify3

树状图选择

<template>
  <v-container>
    <v-select v-model="selectionType" :items="['leaf', 'independent']" label="Selection type"></v-select>
    <v-row>
      <v-col>
        <v-treeview
          v-model="selection"
          :items="items"
          :selection-type="selectionType"
          color="primary"
          shaped
          dense
          selectable
          activatable
          hoverable
          return-object
          open-all
        ></v-treeview>
      </v-col>
      <v-divider vertical></v-divider>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    selectionType: "leaf",
    selection: [],
    items: [
      {
        id: 1,
        name: "Root",
        children: [
          { id: 2, name: "Child 1" },
          { id: 3, name: "Child 2" },
          {
            id: 4,
            name: "Child 3",
            children: [
              { id: 5, name: "Grandchild 1" },
              { id: 6, name: "Grandchild 2" },
            ],
          },
        ],
      },
    ],
  }),
};
</script>

说明：selection-type 控制树形视图如何选择节点。 有两种模式可用：‘leaf’ 和 ‘independent’。默认当我们选择父节点时，它将包括节点的叶子leaf，另一种类型是 ，它允许我们单独选择所有节点：'independent。selectable 将在每个节点旁边渲染一个复选框，以允许选择它们。 return-object 当 true 时，v-model、active.sync 和 open.sync 将返回完整的对象而不是只是键。activatable 可激活。hoverable 可悬停。我们有一个状态，其中包含一个项目数组。items

每个对象都具有 and 属性，其中包含要显示的节点 ID 和名称。id``name

该属性具有一个数组，其中包含具有相同属性的对象。children

然后我们把它传递给 的道具。v-treeview item我们可以使用道具使条目占用更少的空间：dense 。color 单击条目时显示背景色。

shaped 角落将在右侧变圆，换成 rounded 则两侧都变圆。 item-disabled="locked" 用来禁用包含属性值 locked 且为 true 的结点。

Read more »