H5树组件的开发

原生 JS 实现树组件

需求分析：

使用`el-tree`组件，渲染树状数据。

要求默认子孩子展开，点击父节点展开、收起树，箭头随收起展开变化，异步请求数据。

主要思路：递归

• - 使用ul li 构建树结构
• - 设置每个树节点的唯一标识

`valueKey`属性，每个树节点的唯一标识，必须设置

• - 点击父级节点时控制子节点的折叠：

是否在点击节点的时候展开或者收缩节点。 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。

• - 通过样式去控制展开和收起

使用transform CSS样式，通过子孩子的length数量去判断当前样式是展开还是收起状态。

代码实现

父组件：

Liquor Tree组件

Liquor Tree 是一款轻量级树形选择器，对移动端友好，可拖放，支持键盘快捷键，每个操作动作都有事件记录，与 Vue 高度整合。Liquor Tree 代码简洁，扩展性强，可根据你的应用场景按需定制。

Vue 树组件，可让您以美观和逻辑的方式呈现层次结构的数据。

支持移动，并具有各种响应事件。 灵活的配置选项，并支持键盘导航。

文档（https://amsik.github.io/liquor-tree/）    

github 地址 :
GitHub - amsik/liquor-tree: Tree component based on Vue.js

组件特点 ：

• 拖放 移动友好

• 每个动作的事件

• 灵活的配置

• 每页任意数量的实例

• 多选

• 键盘导航

• 过滤

• 分类

• 与 Vuex 集成

安装 ：

$ npm install liquor-tree
$ yarn add liquor-tree

引入：

import Vue from 'vue'
import LiquorTree from 'liquor-tree'
 
// global registration
Vue.use(LiquorTree) 
 
// or
Vue.component(LiquorTree.name, LiquorTree) 
 
// or
import LiquorTree from 'liquor-tree'
 
// local registration
export default {
  name: 'your-awesome-component',
  components: {
    [LiquorTree.name]: LiquorTree 
  }
}

注册：

组件的options属性

名称	类型	默认值	描述
multiple	Boolean	true	允许选择多个节点
checkbox	Boolean	false	复选框模式，它显示每个节点的复选框
checkOnSelect	Boolean	false	仅适用于复选框模式。当用户单击文本或者复选框时，节点将处于选中状态。
autoCheckChildren	Boolean	true	仅适用于复选框模式。子项将与父项具有相同的选中状态
parentSelect	Boolean	false	通过单击具有子节点的节点，将展开节点。即，我们有两种方法来展开/折叠节点，通过单击箭头和文本
keyboardNavigation	Boolean	true	允许用户使用键盘导航树
propertyNames	Object	-	此选项允许重新定义默认树结构
deletion	Boolean	Function	false
fetchData	Object	-	设置异步数据
dnd	Object	-	dnd的事件包括拖动开始，拖动结束
editing	Object	-	节点的编辑修改，按enter键或者单击页面的任意区域时，更改将被应用。

Structure结构

{
  "id": Number,
  "text": String,
  "data": Object,
  "children": Array,
  "state": Object
}

• id: 节点id

• text: 节点label

• data: 每个节点的中间数据。你想要什么都行。这个对象是为每个节点创建的，VueJS使这个属性反应。

• children: 节点子节点

• state: 允许用户设置节点的状态。状态包括以下：

代码示例

 vue-treeselect 组件

Vue-Treeselect是一款基于Vue.js的树形选择器，它可以帮助开发者快速构建一个可以多选的树形选择器，支持异步加载数据，支持搜索等功能。

GitCode : https://gitcode.com/riophae/vue-treeselect/overview?utm_source=csdn_github_accelerator&isLogin=1

官网 : https://vue-treeselect.js.org/

组件特点：

treeselecte 是一个具有嵌套选项的多选择组件，支持 Vue.js。

• - 支持嵌套选项的单个和多个选项 
• - 模糊匹配 
• - 异步搜索 
• - 支持嵌套选项的单个和多个选择 
• - 支持嵌套选项的单个和多个选择，使用回车键等 
• - 丰富的选项和高度可定制的 
• - 支持多种浏览器 
• - 必须 Vue 2.2+ 

安装

$ npm install --save @riophae/vue-treeselect
$ yarn add --save @riophae/vue-treeselect

引入

import Vue from 'vue'
import vueTreeselect from 'vue-treeselect'
 
// global registration
Vue.use(vueTreeselect) 
 
// or
Vue.component(vueTreeselect.name, vueTreeselect) 
 
// or
import vueTreeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
// local registration
export default {
  name: 'vueTreeselect',
  components: {
    [vueTreeselect.name]: vueTreeselect 
  }
}

注册：

API - Props

• options：树形结构的数据，必填。
• multiple：是否可以多选，默认为false。
• load-options：异步加载子节点数据的函数，可选。
• auto-load-root-options：是否自动加载根节点数据，默认为false。

props: {
  /**
   * 即使有禁用的选定节点，是否允许重置值
   */
  allowClearingDisabled: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 选择/取消选择祖先节点时，是否应选择/取消选中其禁用的后代
   * 和 allowClearingDisabled 一起使用
   */
  allowSelectingDisabledDescendants: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 菜单是否应始终打开
   */
  alwaysOpen: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 是否将菜单加到body上
   */
  appendToBody: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 是否启用异步搜索模式
   */
  async: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 是否自动将组件集中在装载上？
   */
  autoFocus: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 装载时自动加载根选项。当设置为“false”时，打开菜单时将加载根选项。
   */
  autoLoadRootOptions: {
    type: Boolean,
    default: true,
  },
 
  /**
   * 当用户取消选择一个节点时，会自动取消选择其祖先。仅适用于平面模式。
   */
  autoDeselectAncestors: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 当用户取消选择节点时，会自动取消选择其子节点。仅适用于平面模式。
   */
  autoDeselectDescendants: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 当用户选择一个节点时，会自动选择其祖先。仅适用于平面模式。
   */
  autoSelectAncestors: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 当用户选择一个节点时，会自动选择其子节点。仅适用于平面模式。
   */
  autoSelectDescendants: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 如果没有文本输入，按退格键是否删除最后一项。
   */
  backspaceRemoves: {
    type: Boolean,
    default: true,
  },
 
  /**
   * 在清除所有输入字段之前进行处理的函数。
   * 返回“false”以防止清除值
   * @type {function(): (boolean|Promise)}
   */
  beforeClearAll: {
    type: Function,
    default: constant(true),
  },
 
  /**
   * 在叶节点之前显示分支节点？
   */
  branchNodesFirst: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 是否应该缓存每个搜索请求的结果？
   */
  cacheOptions: {
    type: Boolean,
    default: true,
  },
 
  /**
   * 是否显示重置值的“×”按钮？
   */
  clearable: {
    type: Boolean,
    default: true,
  },
 
  /**
   * 清楚文本，multiple为true时
   */
  clearAllText: {
    type: String,
    default: 'Clear all',
  },
 
  /**
   * 选择后是否清除搜索输入。
   * 仅当“multiple”为“true”时使用。
   * 对于单选模式，无论道具值如何，它总是**在选择一个选项后清除输入。
   */
  clearOnSelect: {
    type: Boolean,
    default: false,
  },
 
  /**
   * “×”按钮的标题。
   */
  clearValueText: {
    type: String,
    default: 'Clear value',
  },
 
  /**
   * 选择选项后是否关闭菜单？
   * 仅当“multiple”为“true”时使用。
   */
  closeOnSelect: {
    type: Boolean,
    default: true,
  },
 
  /**
   * 加载时应自动展开多少级别的分支节点。
   * 设置Infinity以使所有分支节点在默认情况下展开。
   */
  defaultExpandLevel: {
    type: Number,
    default: 0,
  },
 
  /**
   * 在用户开始搜索之前要显示的默认选项集。用于异步搜索模式。
   * 当设置为“true”时，将自动加载作为空字符串的搜索查询结果。
   * @type {boolean|node[]}
   */
  defaultOptions: {
    default: false,
  },
 
  /**
   * 如果没有文本输入，按delete键是否删除最后一项。
   */
  deleteRemoves: {
    type: Boolean,
    default: true,
  },
 
  /**
   * 用于连接隐藏字段值的多个值的分隔符。
   */
  delimiter: {
    type: String,
    default: ',',
  },
 
  /**
   * 仅显示与搜索值直接匹配的节点，不包括其祖先。
   *
   * @type {Object}
   */
  flattenSearchResults: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 是否阻止选择分支节点？
   */
  disableBranchNodes: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 禁用控制？
   */
  disabled: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 是否禁用模糊匹配功能？
   */
  disableFuzzyMatching: {
    type: Boolean,
    default: false,
  },
 
  /**
   *是否启用平面模式。非平面模式（默认）是指： 
   *   - 每当检查分支节点时，它的所有子节点也将被检查
   *   - 每当一个分支节点检查了所有子节点时，该分支节点本身也会被检查
   * 设置“true”以禁用此机制
   */
  flat: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 将以所有事件作为最后一个参数进行传递。
   * 有助于识别事件的起源。
  */
  instanceId: {
    // Add two trailing "$" to distinguish from explictly specified ids.
    default: () => `${instanceId++}$$`,
    type: [String, Number],
  },
 
  /**
   * Joins multiple values into a single form field with the `delimiter` (legacy mode).
   * 使用“分隔符”将多个值合并到一个表单字段中（传统模式）。
  */
  joinValues: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 限制所选选项的显示。
   * 其余部分将隐藏在limitText字符串中。
   */
  limit: {
    type: Number,
    default: Infinity,
  },
 
  /**
   * 函数，在选定元素超过定义的限制时处理显示的消息
   * @type {function(number): string}
   */
  limitText: {
    type: Function,
    default: function limitTextDefault(count) { // eslint-disable-line func-name-matching
      return `and ${count} more`
    },
  },
 
  /**
   * 加载选项时显示的文本。
   */
  loadingText: {
    type: String,
    default: 'Loading...',
  },
 
  /**
   * 用于动态加载选项
   * @type {function({action: string, callback: (function((Error|string)=): void), parentNode: node=, instanceId}): void}
   */
  loadOptions: {
    type: Function,
  },
 
  /**
   * 要筛选的节点属性。
   */
  matchKeys: {
    type: Array,
    default: constant(['label']),
  },
 
  /**
   *  设置菜单的`maxHeight`样式值
   */
  maxHeight: {
    type: Number,
    default: 300,
  },
 
  /**
   * 设置`true`允许选择多个选项(即多选模式)。
   */
  multiple: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 为html表单生成一个隐藏的标签，其中包含这个字段名。
   */
  name: {
    type: String,
  },
 
  /**
   * 当分支节点没有子节点时显示的文本。
   */
  noChildrenText: {
    type: String,
    default: 'No sub-options.',
  },
 
  /**
   * 没有可用选项时显示的文本。
   */
  noOptionsText: {
    type: String,
    default: 'No options available.',
  },
 
  /**
   * 没有匹配的搜索结果时显示的文本。
   */
  noResultsText: {
    type: String,
    default: 'No results found...',
  },
 
  /**
   * 用于规范化源数据。
   * @type {function(node, instanceId): node}
   */
  normalizer: {
    type: Function,
    default: identity,
  },
 
  /**
   * 默认情况下(' auto ')，菜单将在控件下方打开。如果空间不够，vue-treeselect将自动翻转菜单。可以使用其他四个选项之一来强制菜单始终按指定的方向打开。
可接受的值:
   *   - `"auto"`
   *   - `"below"`
   *   - `"bottom"`
   *   - `"above"`
   *   - `"top"`
   */
  openDirection: {
    type: String,
    default: 'auto',
    validator(value) {
      const acceptableValues = ['auto', 'top', 'bottom', 'above', 'below']
      return includes(acceptableValues, value)
    },
  },
 
  /**
   * 是否在单击控件时自动打开菜单。
   */
  openOnClick: {
    type: Boolean,
    default: true,
  },
 
  /**
   * 控件获得焦点时是否自动打开菜单。
   */
  openOnFocus: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 可用选项的数组。
   * @type {node[]}
   */
  options: {
    type: Array,
  },
 
  /**
   * 字段占位符，没有值时显示。
   */
  placeholder: {
    type: String,
    default: 'Select...',
  },
 
  /**
   * 在需要的时候应用HTML5的required属性。
   */
  required: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 文本显示询问用户是否重试加载子选项。
   */
  retryText: {
    type: String,
    default: 'Retry?',
  },
 
  /**
   * 重试按钮的标题。
   */
  retryTitle: {
    type: String,
    default: 'Click to retry',
  },
 
  /**
   * 启用搜索功能?
   */
  searchable: {
    type: Boolean,
    default: true,
  },
 
  /**
   * 搜索祖先节点。
   */
  searchNested: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 提示异步搜索的文本提示。
   */
  searchPromptText: {
    type: String,
    default: 'Type to search...',
  },
 
  /**
   * 是否在每个分支节点的标签旁边显示子节点计数。
   */
  showCount: {
    type: Boolean,
    default: false,
  },
 
  /**
   * 与`showCount`一起使用，指定应该显示哪种类型的计数。
   * Acceptable values:
   *   - "ALL_CHILDREN"
   *   - "ALL_DESCENDANTS"
   *   - "LEAF_CHILDREN"
   *   - "LEAF_DESCENDANTS"
   */
  showCountOf: {
    type: String,
    default: ALL_CHILDREN,
    validator(value) {
      const acceptableValues = [ALL_CHILDREN, ALL_DESCENDANTS, LEAF_CHILDREN, LEAF_DESCENDANTS]
      return includes(acceptableValues, value)
    },
  },
 
  /**
   * 搜索时是否显示子项计数。
   * 当未指定时，回退到`showCount`的值。
   * @type {boolean}
   */
  showCountOnSearch: null,
 
  /**
   * 选择的选项应该以何种顺序显示在trigger中并在`value`数组中排序。
   * Used for multi-select mode only.
   * Acceptable values:
   *   - "ORDER_SELECTED"
   *   - "LEVEL"
   *   - "INDEX"
   */
  sortValueBy: {
    type: String,
    default: ORDER_SELECTED,
    validator(value) {
      const acceptableValues = [ORDER_SELECTED, LEVEL, INDEX]
      return includes(acceptableValues, value)
    },
  },
 
  /**
   * 控件的选项卡索引。
   */
  tabIndex: {
    type: Number,
    default: 0,
  },
 
  /**
   * 控件的值。
   * 单选模式应该是`id`或`node`对象，多选模式应该是一个`id`或`node`对象数组。
   * 它的格式取决于`valueFormat`属性。
   * 在大多数情况下，只需使用`v-model`即可。
   * @type {?Array}
   */
  value: null,
 
  /**
   * 在多选模式下，哪种类型的节点应该包含在`value`数组中。
   * 可接受值：
   *   - "ALL" - 任何被检查的节点都将被包含在`value`数组中
   *   - "BRANCH_PRIORITY" (default) - 如果检查了分支节点，它的所有后代节点将被排除在`value`数组之外
   *   - "LEAF_PRIORITY" - 如果检查了分支节点，则该节点本身及其分支后代将被排除在`value`数组之外，但其叶子后代将被包含在内
   *   - "ALL_WITH_INDETERMINATE" - 任何被检查的节点都会被包含在`value`数组中，加上不确定的节点
   */
  valueConsistsOf: {
    type: String,
    default: BRANCH_PRIORITY,
    validator(value) {
      const acceptableValues = [ALL, BRANCH_PRIORITY, LEAF_PRIORITY, ALL_WITH_INDETERMINATE]
      return includes(acceptableValues, value)
    },
  },
 
  /**
   * `value`属性的格式。
   * 注意，当设置为`"object"`时，在`value`属性中的每个`node`对象中只需要`id`和`label`属性。
   * Acceptable values:
   *   - "id"
   *   - "object"
   */
  valueFormat: {
    type: String,
    default: 'id',
  },
 
  /**
   * 菜单的Z-index。
   */
  zIndex: {
    type: [Number, String],
    default: 999,
  }
}

代码实例