记录基于Vue.js的移动端Tree树形组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了记录基于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

移动端tree组件,前端,Vue,vue.js,前端,javascript

产品特点：

拖放移动友好

每个动作的事件

灵活的配置

每页任意数量的实例

多选

键盘导航

过滤

分类

与 Vuex 集成

入门：

安装：

Npm:
$ npm install liquor-tree
Yarn:
$ 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

（当然，如果需要的话）。
您不需要关心样式，它们会自动附加到文档中。
当与模块系统一起使用时，有三种方法可以注册组件（可能更多…我不知道）。
好了，下面这是我们的方式：
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 // 第三种
  },
  ...
}
要注册库，您可以在我上面提到的 3 种方法之间进行选择。

当直接在浏览器中使用时，您可以通过CND包含 liquor-tree（这是库的最新版本）：
<script src="https://cdn.jsdelivr.net/npm/liquor-tree/dist/liquor-tree.umd.js"></script>

Usage 用法文章来源地址https://www.toymoban.com/news/detail-544271.html

  <!-- Vue Component -->
  <template>
    <tree
        :data="items"
        :options="options"
        ref="tree"
    />
  </template>

  <script>
    import Vue from 'vue'
    import LiquorTree from 'liquor-tree'

    Vue.use(LiquorTree)

    export default {
      ...
      data() {
        return {
          items: [
            {text: 'Item 1'},
            {text: 'Item 2'},
            {text: 'Item 3', children: [
              {text: 'Item 3.1'},
              {text: 'Item 3.2'}
            ]},
      {
        text: '其他',
        children: [
          {
            text: '其他1',
            children: [
              { text: '其他1.1.1' },
              { text: '其他1.1.2' },
              { text: '其他1.1.3' },
            ],
          },
          {
            text: '其他2',
            children: [
              { text: '其他2.1.1' },
              { text: &#

到了这里，关于记录基于Vue.js的移动端Tree树形组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！