单击已选择的树项时，如何停止 Vuetiify v-treeview 取消选择？

Question

我的项目中有一个 vuetify v-treeview 启用了可激活。假设用户已经选择了树项目之一。稍后，他/她单击已选择的树项。问题是它没有被选中。有没有办法防止这种情况？

<template>
  <v-treeview
    shaped
    hoverable
    activatable
    :items="items"
  ></v-treeview>
</template>

<script>
  export default {
    data: () => ({
      items: [
        {
          id: 1,
          name: 'Applications :',
          children: [
            { id: 2, name: 'Calendar : app' },
            { id: 3, name: 'Chrome : app' },
            { id: 4, name: 'Webstorm : app' },
          ],
        },
        {
          id: 5,
          name: 'Documents :',
          children: [
            {
              id: 6,
              name: 'vuetify :',
              children: [
                {
                  id: 7,
                  name: 'src :',
                  children: [
                    { id: 8, name: 'index : ts' },
                    { id: 9, name: 'bootstrap : ts' },
                  ],
                },
              ],
            },
            {
              id: 10,
              name: 'material2 :',
              children: [
                {
                  id: 11,
                  name: 'src :',
                  children: [
                    { id: 12, name: 'v-btn : ts' },
                    { id: 13, name: 'v-card : ts' },
                    { id: 14, name: 'v-window : ts' },
                  ],
                },
              ],
            },
          ],
        },

      ],
    }),
  }
</script>

Answer 1

如果项目被选中（活动），则可以阻止项目点击事件的传播。为此，您必须为项目标签定义模板并添加（如果您使用图标）。

图标和标签放置在一些容器元素中，这增加了一些可点击的边距。我通过使用额外的边距解决了这个问题。

<v-treeview activatable :items="items">
  <template v-slot:label="{ item, active }">
    <div @click="active ? $event.stopPropagation() : null" style="width:100%;margin:-5px;padding:5px">
      {{ item.name }}
    </div>
  </template>
</v-treeview>

这是 jsfiddle 测试的链接：https ://jsfiddle.net/edbcy07t/