javascript - 使用复选框实现树并拖放

Question

我试图在 Vue 中使用复选框和拖放来实现 TreeView 。但我不知道从哪里开始。

我实现了复选框，但我不知道如何在选择父项以选择所有子项时添加支持，以及在选择所有子项以选择父项时如何添加支持？

我也有拖放问题，我尝试使用 vue-draggable 但我不知道如何实现它

我试图实现，像这样:

https://ej2.syncfusion.com/vue/documentation/treeview/check-box/

这是我的沙箱，我设法实现了:

https://codesandbox.io/s/immutable-cookies-8lxxf

Answer 1

我尝试使用 Vue 使用 recursive component可以在下面找到。它显示了如何从父级中选择所有子级以及如何使用 vue-draggable(尽管您只能在同一层上拖动)。这应该是一个不错的起点，它需要一些调整。

编辑:

为了适应多个级别的拖放，我编辑了代码，使可拖动对象位于同一组中。我已经快速对其进行了测试并且这个概念有效，但它仍然需要一些调整。对嵌套 vue-draggable 的支持可以找到 here ，我还在 GitHub 上创建了一个 JSFiddle 的分支，这样你就可以 see how they implemented nesting

let tree = {
  draggableOptions: {group: 'share'},
  label: 'root',
  selected: false,
  nodes: [
    {
      label: 'item1',
      selected: false,
      nodes: [
        {
          label: 'item1.1',
          selected: false
        },
        {
          label: 'item1.2',
          selected: false,
          nodes: [
            {
              label: 'item1.2.1',
              selected: false
            }
          ]
        }
      ]
    }, 
    {
      label: 'item2',
      selected: false
    }
  ]
}

Vue.component('tree-menu', { 
  template: '#tree-menu',
  props: [ 'nodes', 'label', 'depth', 'selected' ],
  data() {
     return {
       showChildren: false
     }
  },
  computed: {
    iconClasses() {
      return {
        'fa-plus-square-o': !this.showChildren,
        'fa-minus-square-o': this.showChildren
      }
    },
    labelClasses() {
      return { 'has-children': this.nodes }
    },
    indent() {
      return { transform: `translate(${this.depth * 50}px)` }
    }
  },
  methods: {
    toggleChildren() {
       this.showChildren = !this.showChildren;
    
    },
    tickChildren(ev) {
      this.selected = !this.selected;  
      this.tickRecursive(this);
    },
    tickRecursive(node) {
       if(node.nodes && node.nodes.length)
          node.nodes.forEach(x => {
            x.selected = this.selected;
            this.tickRecursive(x);
          });
    }
  }
});

new Vue({
  el: '#app',
  data: {
    tree
  }
})

body {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1em;
}

.container {
  padding-left: 5rem;
  padding-right: 5rem;
  margin: 0 auto;
}

.tree-menu {
  .label-wrapper {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    .has-children {
      cursor: pointer;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>


<div class="container">
  <h4>Implement Tree with checkboxes and drag drop<br/><small>(Using Vue, Recursive Component, Vue Draggable)</small><br /><small><a href="https://stackoverflow.com/questions/60260675/implement-tree-with-checkboxes-and-drag-drop" target="_blank">For StackOverflow Question</a></small></h4>
  <div id="app">
   
  <tree-menu 
             :nodes="tree.nodes" 
             :depth="0"   
             :label="tree.label"
             :selected="tree.selected"
             ></tree-menu>
       
 
  </div>
    
</div>


<script type="text/x-template" id="tree-menu">

  <div class="tree-menu">
    <div class="label-wrapper">
      <div :style="indent" :class="labelClasses" @click.stop="toggleChildren">
        <i v-if="nodes" class="fa" :class="iconClasses"></i>
        <input type="checkbox" :checked="selected" @input="tickChildren" @click.stop />
        {{label}}
      </div>
    </div>
    
        <draggable v-model="nodes" :options="{group:{ name:'g1'}}">    
    <tree-menu 
      v-if="showChildren"
      v-for="node in nodes" 
      :nodes="node.nodes" 
      :label="node.label"
      :depth="depth + 1"
      :selected="node.selected"
      :key="node"
    >
    </tree-menu>
            </draggable>

  </div>

</script>