纪录基于Vue.js的移动端Tree树形组件

目录
一、Liquor Tree
入门 ：
Development
Component Options 组件选项
Structure 布局
二、vue-treeselect
Introduction 介绍
Getting Started 入门

---

    Vue 树形选择器（ Vue tree select ）组件在搭建 Vue 的 app 中特别常用，Vue tree select 除了简朴的树形布局外，另有非常多样的功能来共同差异场景的使用。好比搜索过滤，前端添加删除树枝，前端编辑修改子树名，拖拽排序，对用户操作事件纪录等。本文纪录了我本身使用多年最好用的 2 款 Vue tree select 组件，每一款都颠末我实际测试，保举给各人。

---

一、Liquor Tree

酒树 (Liquor Tree)
    Liquor Tree 是一款轻量级树形选择器，对移动端友好，可拖放，支持键盘快捷键，每个操作动作都有事件纪录，与 Vue 高度整合。Liquor Tree 代码简洁，扩展性强，可根据你的应用场景按需定制。
       A Vue tree component that allows you to present hierarchically organized data in a nice and logical manner.
      Vue 树组件，可让您以雅观和逻辑的方式呈现层次布局的数据。
      supports mobile, and has a variety of response events. Flexible configuration options, and support for keyboard navigation.
      支持移动，并具有各种相应事件。 机动的设置选项，并支持键盘导航。
      View demo    检察演示    Documentation
    github 地点 ：
  GitHub - amsik/liquor-tree: Tree component based on Vue.js
  
  

---

  Vue 官方地点 ：
  Liquor Tree
  
  
   
  产品特点 ：
  

• 拖放 移动友好
  
• 每个动作的事件
  
• 机动的设置
  
• 每页任意数量的实例
  
• 多选
  
• 键盘导航
  
• 过滤
  
• 分类
  
• 与 Vuex 集成
  

  

---

  
  入门 ：

  安装 ：
  Npm:

1. $ <strong>npm install liquor-tree</strong>

复制代码

Yarn:

1. $ yarn add liquor-tree

复制代码

  要在本身的计算机上运行该演示，请执行以下操作：
  克隆此存储库
  

• npm install （ npm安装 ）
  
• npm run build （ npm运行构建 ）
  
• npm run storybook
  
• 访问 http://localhost:9001/
  

  这里有很多例子供您参考。 全部泉源都位于 liquor-tree/docs/storybook/stories
  

---

  它必须安装到 VueJS 实例中。请检察官方文档，相识怎样使用 VueJS 组件 components
  （当然，如果需要的话）。
您不需要关心样式，它们会主动附加到文档中。
当与模块系同一起使用时，有三种方法可以注册组件（可能更多…我不知道）。
好了，下面这是我们的方式：
  

1. import Vue from 'vue'
2. import LiquorTree from 'liquor-tree'
4. // global registration
5. Vue.use(LiquorTree) // 第一种
7. // or
8. Vue.component(LiquorTree.name, LiquorTree) // 第二种
10. // or
11. import LiquorTree from 'liquor-tree'
13. // local registration
14. export default {
15.   name: 'your-awesome-component',
16.   components: {
17.     [LiquorTree.name]: LiquorTree // 第三种
18.   },
19.   ...
20. }

复制代码

要注册库，您可以在我上面提到的 3 种方法之间举行选择。
  当直接在欣赏器中使用时，您可以通过CND包含 liquor-tree（这是库的最新版本）： 

1. <script src="https://cdn.jsdelivr.net/npm/liquor-tree/dist/liquor-tree.umd.js"></script>

复制代码

---

Usage 用法

1.   <!-- Vue Component -->
2.   <template>
3.     <tree
4.         :data="items"
5.         :options="options"
6.         ref="tree"
7.     />
8.   </template>
10.   <script>
11.     import Vue from 'vue'
12.     import LiquorTree from 'liquor-tree'
14.     Vue.use(LiquorTree)
16.     export default {
17.       ...
18.       data() {
19.         return {
20.           items: [
21.             {text: 'Item 1'},
22.             {text: 'Item 2'},
23.             {text: 'Item 3', children: [
24.               {text: 'Item 3.1'},
25.               {text: 'Item 3.2'}
26.             ]},
27.       {
28.         text: '园区其他机构',
29.         children: [
30.           {
31.             text: '园区其他机构1',
32.             children: [
33.               { text: '园区其他机构1.1.1' },
34.               { text: '园区其他机构1.1.2' },
35.               { text: '园区其他机构1.1.3' },
36.             ],
37.           },
38.           {
39.             text: '园区其他机构2',
40.             children: [
41.               { text: '园区其他机构2.1.1' },
42.               { text: '园区其他机构2.1.2' },
43.               { text: '园区其他机构2.1.3' },
44.             ],
45.           },
46.         ],
47.       },
48.           ],
49.           options: {
50.             checkbox: true
51.           }
52.         }
53.       }
54.       ...
55.     }
56.   </script>

复制代码

---

Development

Check out the package.jsons script section. There are 2 scripts:

• npm run dev - it will open browser and you can play with code
  
• npm run build - it will craete a module file in production mode
  

---

Component Options 组件选项



Name 名称Type 范例DefaultDescription 形貌multipleBooleantrue Allows to select more than one node.
答应选择多个节点
checkboxBooleanfalse checkbox mode. It shows checkboxes for every node
复选框模式。它表现每个节点的复选框
checkOnSelectBooleanfalse For checkbox mode only. Node will have checked state when user clicks either text or checkbox
仅用于复选框模式。当用户单击文本或复选框时，节点将处于选中状态
autoCheckChildrenBooleantrue For checkbox mode only. Children will have the same checked state as their parent.
仅用于复选框模式。子级将具有与其父级雷同的选中状态。
parentSelectBooleanfalse By clicking node which has children it expands node. i.e we have two ways to expand/collapse node: by clicking on arrow and on text
通过单击具有子节点的节点，可以睁开节点。即，我们有两种方法来睁开/折叠节点：单击箭头和文本
keyboardNavigationBooleantrue Allows user to navigate tree using keyboard
答应用户使用键盘欣赏树
propertyNamesObject- This options allows the default tree’s structure to be redefined. See example
此选项答应重新界说默认树的布局。见示例
deletionBoolean | Functionfalse If keyboardNavigation is false this property is ignored. This property defines deletion behaviour. See example
如果 keyboardNavigation 为 false ，则忽略此属性。此属性界说删除举动。见示例
fetchDataObject-See guidedndObject-See guide   请参阅指南editingObject-See guide

---

Structure 布局

The component has only two props: data and options. 该组件只有两个支柱：数据和选项。

• property options - This property defines tree behavior.   属性选项 - 此属性界说树举动
  
• property data - Array-like object that defines tree nodes. 属性数据 - 界说树节点的雷同数组的对象
  

---

关于 Liquor Tree 树形组件的介绍就到此为止了，因为此组件未满足业务需求：搜索过滤功能。
再加上官方文档全都是英文的，以是就懒得再继续研究下去了。
因此另辟蹊径，找到了个人以为更加友好、更加优秀的一款 Tree 树形组件。
期间查询到一款应该还不错 ：LyTree 树形组件 （ 貌似无搜索过滤 ）
链接