Что такое v-tree?

На основе vue древовидное меню.

Объяснение:

• Однократное, множественное и включение / выключение флажков (по умолчанию флажок установлен), отображение пунктирной линии при раскрытии, функция обратного вызова при нажатии на узел, возвращает true при выборе и инициирует событие выбора, false — наоборот.
  Событие выбора узла возвращает информацию о выбранном узле и предыдущем выбранном узле. Событие выбора / отмены выбора флажка возвращает все данные выбранных флажков. Асинхронная загрузка данных.

• Описание пользовательских переменных и функций Vue:

  • treeNode — тип: json, значение по умолчанию: [] — стандартный узел дерева JSON, атрибут name обязателен для заполнения;
  • allOpen — тип: boolean, значение по умолчанию: false — открытие / закрытие всех узлов;
  • nodeTrigger — тип: boolean, значение по умолчанию: false — инициировать ли событие узла при щелчке по узлу;
  • @call — тип: Function, параметр: внутри treeNode, можно изменить, страница будет перерисована — инициализирующая функция обратного вызова, параметр — глубокая копия данных узла, которые можно изменить, дерево будет перерисовываться;
  • :beforeClick — тип: Function, параметр: текущая информация об узле — функция обратного вызова перед щелчком по узлу, return false не может инициировать событие clickNode;
  • :clickNode — тип: Function, параметры 1: текущая информация об узле, параметр 2: информация о последнем выбранном узле — событие клика по узлу, функция обратного вызова;
  • :checkBox — тип: boolean, значение по умолчанию: false — включить / выключить флажок;
  • :checkBoxType — тип: boolean, значение по умолчанию: true — включить / выключить каскадный выбор;
  • @checkBoxCall — тип: Function, параметр: все наборы выбранных узлов — функция обратного вызова выбора / отмены выбора флажков;
  • :async — тип: boolean, значение по умолчанию: false — включить асинхронный режим;
  • :asyncCall — тип: Function, параметр 1: текущая информация об узле, параметр 2: функция обратного вызова — асинхронная функция обратного вызова с параметром функции, принимающей массив параметров. Пример:
    • asyncCall(data, call) { // data: текущая информация об узле setTimeout(function () { let hm = '' + (new Date()).getTime(); let addNode = [ {id: hm, name: "children node" + hm.substr(hm.length - 4, hm.length)}, ]; call(addNode); // функция обратного вызова }, 800); }

• Пример использования:

  <Tree
      :treeNode="treeNode"
      :allOpen="allOpen"
      :nodeTrigger="nodeTrigger"
      :checkBox="checkBox"
      :beforeClick="beforeClick"
      :checkBoxType="checkBoxType"
      :clickNode="clickNode"
      :hiddenLine="hiddenLine"
      @checkBoxCall="asyncCheckBoxCall"
      @call='callAsync'
      :async="async"
      :asyncCall="asyncCall"
  />

Pull Request

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8089
npm run dev