Реализуйте дерево с флажками и перетащите

Question

Я пытаюсь реализовать просмотр дерева в Vue с помощью флажков, а также с помощью перетаскивания. Но я не знаю, с чего начать.

Я установил флажки, но не знаю, как добавить поддержку, когда для выбора всех детей выбран родитель, а также когда для выбора родителя выбраны все дети?

Также у меня возникли проблемы с перетаскиванием, я пытался использовать vue -draggable, но я не знаю, как это реализовать

Я пытаюсь реализовать, что-то вроде этого:

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

Вот моя песочница, которую мне удалось реализовать:

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

Answer 1

У меня было go при этом с Vue с использованием рекурсивного компонента , который можно найти ниже. Он показывает, как вы можете выбрать все дочерние элементы от родителя и как вы можете использовать vue -draggable (хотя вы можете перетаскивать только на одном уровне). Это должна быть достойная отправная точка, для этого нужно несколько настроек.

РЕДАКТИРОВАТЬ:

Чтобы приспособить для перетаскивания на нескольких уровнях, я отредактировал код так, чтобы перетаскиваемые объекты были в та же группа. Я проверил это быстро, и концепция работает, но она все еще требует некоторых настроек. Поддержка вложенного vue -draggable может быть найдена здесь , я также сделал форк JSFiddle на GitHub, который работает, чтобы вы могли посмотреть, как они реализовали вложение

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;
    }
  }
}

Answer 2

Проверьте этот пример. Они реализовали все, что вам нужно для начала. https://vuejsexamples.com/tree-and-multi-select-component-based-on-vue-js-2/