vue实现下拉菜单树
作者：单飞吧 发布时间：2024-05-09 15:18:39
标签：vue,下拉菜单
本文实例为大家分享了vue实现下拉菜单树的具体代码，供大家参考，具体内容如下
效果：使用 Vue-Treeselect 实现
建议通过npm安装vue-treeselect，并使用webpack之类的捆绑器来构建您的应用程序。
npm install --save @riophae/vue-treeselect
官网实例 配置属性请查看官网
<!-- Vue SFC -->
<template>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</template>
<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
// register the component
components: { Treeselect },
data() {
return {
// define the default value
value: null,
// define options
options: [ {
id: 'a',
label: 'a',
children: [ {
id: 'aa',
label: 'aa',
}, {
id: 'ab',
label: 'ab',
} ],
}, {
id: 'b',
label: 'b',
}, {
id: 'c',
label: 'c',
} ],
}
},
}
</script>
更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
来源：https://blog.csdn.net/weixin_44640323/article/details/109174222
0
投稿猜你喜欢
- 今天有个需要需要传递中文参数给URL但是在GBK环境下的脚本传递GBK的参数老是给我报UNICODE的解码错误。烦的很。所以我们果断选择用u
- 在很多的情况下，在编写存储过程中往往会用到数组，但是mysql中存储过程传入参数并没有可以直接传入数组的方法。在这种情况下我们只能退而求之或
http请求介绍HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。计算机专家设计出HTT- 1.绘制面积图面积图常用于描述某指标随时间的变化程度。其面积也通常可以有一定的含义。绘制面积图使用的是plt.stackplot()方法。以
- 在ASP.NET中，如何连接 SQLServer数据库？连接数据库：<％@ Import Namespace=&q
- 前言看到这里已经学习了创建各种 Python 数据类型的值。并且显示的值都是文字或常量值。>>> print(9.98)9
- 目录技术背景diagrams的安装基础逻辑关系图组件簇的定义总结概要技术背景对于一个架构师或者任何一个软件工程师而言，绘制架构图都是一个比较
- 无限循环如果条件判断语句永远为 true，循环将会无限的执行下去。如下实例#!/usr/bin/python# -*- coding: UT
- 1 类继承Python 是面向对象的编程语言，因此支持面向对象的三大特性之一：继承。继承是代码重用的一种途径，Python 中的继承就像现实
- 1. 创建主窗口上文中我们建立的图形界面程序 GUIdemo2.py，通过导入图形界面 uiDemo1.py，已经实现了主窗口的创建。1.1
- 前期的入库筛选工作已经由url管理器完成了，整理的工作自然要由url下载器接手。当我们需要爬取的数据已经去重后，下载器的主要任务的是这些数据
- 前言其实有一个模块也支持执行系统命令，那个模块就是sys.system，但他执行系统命令会直接通过主进程去执行命令，那假如，该命令的执行需要
- 今天的这篇文章是讲XHTML中的细节部分的，这篇续述的主题就是ID与CLASS怎么用，在标题中有提及使用原则与技巧，这里的使用原则与技巧是我
- 爬取网站为：http://xiaohua.zol.com.cn/youmo/查看网页机构，爬取笑话内容时存在如下问题：1、每页需要进入“查看
- 问题：python spyder先出现dos窗口，然后后面就什么都没有了。解决方法：C:\用户\Administrator\.spyder3
- Pytorch的backward()函数假若有多个loss函数，如何进行反向传播和更新呢？ x = torch.tensor(2.0, re
- 小程序miniso的一个发布内容截图功能，话不多，先上代码wxml文件：<view class="cut-1-1 t-c {
- 代数运算定义加法运算图像叠加需要满足该条件：两幅图像的像素必须相同（尺寸，形状）减法运算乘法运算1、图像的局部显示。2、用二值蒙版图像与原图
- 在本文中，我们将学习如何使用 OpenCV 为多个图像添加水印。1. 什么是水印？水印是有意叠加在不同图像上的标志、签名、文本或图案，用于保
- 这篇文章主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友
