当前位置: 首页 > news >正文

记录基于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

Liquor-Tree

产品特点 :

  • 拖放 移动友好
  • 每个动作的事件
  • 灵活的配置
  • 每页任意数量的实例
  • 多选
  • 键盘导航
  • 过滤
  • 分类
  • 与 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 用法

  <!-- 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树形组件

目录 一、Liquor Tree 入门 : Development Component Options 组件选项 Structure 结构 二、vue-treeselect Introduction 介绍 Getting Started 入门 Vue 树形选择器( Vue tree select )组件在搭建 Vue 的 app 中特别常用,Vue tree select 除了简单的树形结构…...

Vue中嵌入原生HTML页面的方法

在Vue中嵌入原生HTML页面通常可以通过组件或页面的方式来完成。下面将详细说明如何通过组件方式实现这个功能&#xff0c;并提供一个简单的代码示例。 方法说明 创建原生HTML页面&#xff1a;首先&#xff0c;你需要创建一个原生HTML页面&#xff0c;这个页面可以是一个独立的…...

17 # 类型检查机制:类型保护

例子&#xff1a; enum Type {Strong,Week }class Java {helloJava(){console.log(hello Java);} }class JavaScript {helloJavaScript(){console.log(hello JavaScript);} }function getLanguage(type: Type){let lang type Type.Strong ? new Java() : new JavaScript();…...

Vulnhub-RIPPER: 1渗透

文章目录 一、前言1、靶机ip配置2、渗透目标3、渗透概括 开始实战一、信息获取二、rips的使用三、获取密码文件四、日志审查五、提权 一、前言 由于在做靶机的时候&#xff0c;涉及到的渗透思路是非常的广泛&#xff0c;所以在写文章的时候都是挑重点来写&#xff0c;尽量的不饶…...

幻兽帕鲁自建服务器:可以使用香港服务器吗?

随着网络技术的发展&#xff0c;越来越多的游戏爱好者选择通过自建服务器来享受游戏的乐趣。幻兽帕鲁作为一款备受喜爱的游戏&#xff0c;也有不少玩家想要自建服务器进行游戏。而在选择服务器地点时&#xff0c;很多玩家会想到使用香港服务器。那么&#xff0c;是否可以使用香…...

Revisiting image pyramid structure for high resolution salient object detection

accv2022的技术&#xff0c;在我测评的数据集上确实要明显好于basnet&#xff0c;rembg等一众方法。 1.Introduction 使用LR数据集训练的方法通过调整输入尺寸可以在HR图像上产生不错的结果。本文主要关注仅使用LR数据集进行训练以产生高质量的HR预测。HR的有效感受野ERFs和LR…...

中移(苏州)软件技术有限公司面试问题与解答(7)—— kmalloc与vmalloc的区别与联系及使用场景

接前一篇文章&#xff1a;中移&#xff08;苏州&#xff09;软件技术有限公司面试问题与解答&#xff08;0&#xff09;—— 面试感悟与问题记录 本文参考以下文章&#xff1a; kmalloc与vmalloc如何选择 Vmalloc与kmalloc的区别 特此致谢&#xff01; 本文对于中移&#xf…...

微服务-微服务Alibaba-Nacos 源码分析 (源码流程图)

客户端流程 客户端心跳与实例往服务端注册...

后端性能优化的一些总结

目录 1、背景 2、优化实现 2.1查询数据表速度慢 2.2调别人接口速度慢 2.3导入速度慢、 2.4导出速度慢的做出介绍 2.5统计功能速度慢 3、总结 1、背景 系统上线后&#xff0c;被用户反应系统很多功能响应时长很慢。用户页面影响速度有要求&#xff0c;下面针对查询数据表…...

【升级openssl1.1.1t报错libssl.so.1.1: cannot open shared object file】

升级openssl报错&#xff1a; openssl vesion openssl: error while loading shared libraries: libssl.so.1.1: cannot open shared object file: No such file or directory 编译安装openssl1.1.1t当执行openssl version的时候&#xff0c;报上述错误&#xff0c;将编译到的…...

CVE-2024-0352 likeshop v2.5.7文件上传漏洞分析

本次的漏洞研究基于thinkPHP开发开的一款项目..... 漏洞描述 Likeshop是Likeshop开源的一个社交商务策略的完整解决方案&#xff0c;开源免费版基于thinkPHP开发。Likeshop 2.5.7.20210311及之前版本存在代码问题漏洞&#xff0c;该漏洞源于文件server/application/api/contr…...

JAVA处理类似饼状图占比和100%问题,采用最大余额法

前言&#xff1a; 在做数据统计报表的时候&#xff0c;有两种方式解决占比总和达不到100%或者超过100%问题。 第一种方式是前端echart图自带的算分框架。 第二种方式是java后端取处理这个问题。 现存问题&#xff1a; 前端不通过饼状图的方式去展示各个分类的占比累加和为100%问…...

MATLAB矩阵的操作(第一部分)

矩阵的基本知识 矩阵概念 矩阵&#xff08;Matrix&#xff09;在数学中是一个由复数或实数组成的矩形阵列&#xff0c;其元素按照行和列排列。矩阵的定义可以形式化地描述为&#xff1a; 一个 m 行 n 列的矩阵是一个有序的数表&#xff0c;其中包含 m*n 个数&#xff0c;可以…...

全面掌握Django的web框架Django Rest_Framework(一)

文章目录 Django Rest_Framework1. DRF介绍2.DRF特点3.环境安装与配置&#xff08;1&#xff09;DRF需要以下依赖&#xff08;2&#xff09;创建django项目 4.序列化器的使用&#xff08;1&#xff09;创建序列化器 5. 反序列化器使用 Django Rest_Framework 1. DRF介绍 Djan…...

AOP+Redisson 延时队列,实现缓存延时双删策略

一、缓存延时双删 关于缓存和数据库中的数据保持一致有很多种方案&#xff0c;但不管是单独在修改数据库之前&#xff0c;还是之后去删除缓存都会有一定的风险导致数据不一致。而延迟双删是一种相对简单并且收益比较高的实现最终一致性的方式&#xff0c;即在删除缓存之后&…...

Hive中left join 中的where 和 on的区别

目录 一、知识点 二、测试验证 三、引申 一、知识点 left join中关于where和on条件的知识点&#xff1a; 多表left join 是会生成一张临时表。on后面&#xff1a; 一般是对left join 的右表进行条件过滤&#xff0c;会返回左表中的所有行&#xff0c;而右表中没有匹配上的数…...

LaTeX教程(001)-LaTeX文档结构(01)

LaTeX教程(001)- LaTeX \LaTeX LATE​X文档结构(01) 说在前面 这是我本人学习《The LaTeX Companion》第三版的笔记&#xff0c;但并不是翻译。 书籍的第一章对 LaTeX \LaTeX LATE​X及其历史进行了相当长的介绍&#xff0c;这是几乎每一本关于 LaTeX \LaTeX LATE​X的书都会…...

SV-7041T 多媒体教学广播IP网络有源音箱

SV-7041T是深圳锐科达电子有限公司的一款2.0声道壁挂式网络有源音箱&#xff0c;具有10/100M以太网接口&#xff0c;可将网络音源通过自带的功放和喇叭输出播放&#xff0c;可达到功率30W。同时它可以外接一个30W的无源副音箱&#xff0c;用在面积较大的场所。5寸进口全频低音喇…...

Linux文本三剑客awk经典案例

前言&#xff1a; AWK是一种专门用于文本处理的编程语言&#xff0c;它被广泛用于数据提取和报告生成&#xff0c;也是企业笔试面试常考的内容&#xff0c;以下34题是awk的用法案例&#xff0c;希望可以帮到你&#xff01; 1.查看TCP连接状态 [rootnode1 ~]# netstat -nat | a…...

如何使用 Mermaid、GitHub 和 VSCode 用代码创建关系图三

Mermaid 系列 如何使用 Mermaid、GitHub 和 VSCode 用代码创建关系图一如何使用 Mermaid、GitHub 和 VSCode 用代码创建关系图二 1.如何创建甘特图 Gantt 甘特图以条形图的形式用作可视化表示。它有效地展示了项目的时间表&#xff0c;揭示了各个项目组件完成所需的持续时间…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...