vue+iview使用树形控件的具体使用


Posted in Javascript onNovember 02, 2020

vue+iview使用树形控件

1.开发环境 vue+iview

2.电脑系统 windows10专业版

3.在使用 vue+iview开发的过程中,我们经常会使用 iview的树形控件,在这里我就简单的做一个分享,希望对你有所帮助!

4.在template中添加如下代码:

<Scroll style="width: 100%" height="760">
 <Tree
   @on-select-change="chentreelick"
   :data="treedata"
    expand-node
 ></Tree>
</Scroll>

5.在 return 中添加如下代码:

treedata: [
    {
     title: "parent 1",
     chenshow: false,
     expand: true,
     children: [
      {
       title: "parent 1-1",
       chenshow: false,
       expand: true,
       children: [
        {
         title: "leaf 1-1-1",
         chenshow: true,
        },
        {
         title: "leaf 1-1-2",
         chenshow: true,
         selected: true,
        },
       ],
      },
      {
       title: "parent 1-2",
       chenshow: false,
       expand: true,
       children: [
        {
         title: "leaf 1-2-1",
         chenshow: true,
        },
        {
         title: "leaf 1-2-1",
         chenshow: true,
        },
       ],
      },
      {
       title: "parent 1-3",
       chenshow: false,
       expand: true,
       children: [
        {
         title: "leaf 1-3-1",
         chenshow: true,
        },
        {
         title: "leaf 1-3-1",
         chenshow: true,
        },
       ],
      },
      {
       title: "parent 1-4",
       chenshow: false,
       expand: true,
       children: [
        {
         title: "leaf 1-4-1",
         chenshow: true,
        },
        {
         title: "leaf 1-4-1",
         chenshow: true,
        },
       ],
      },
      {
       title: "parent 1-5",
       chenshow: false,
       expand: true,
       children: [
        {
         title: "leaf 1-5-1",
         chenshow: true,
        },
        {
         title: "leaf 1-5-1",
         chenshow: true,
        },
       ],
      },
      {
       title: "parent 1-6",
       chenshow: false,
       expand: true,
       children: [
        {
         title: "leaf 1-6-1",
         chenshow: true,
        },
        {
         title: "leaf 1-6-1",
         chenshow: true,
        },
       ],
      },
      {
       title: "parent 1-7",
       chenshow: false,
       expand: true,
       children: [
        {
         title: "leaf 1-7-1",
         chenshow: true,
        },
        {
         title: "leaf 1-7-1",
         chenshow: true,
        },
       ],
      },
      {
       title: "parent 1-8",
       chenshow: false,
       expand: true,
       children: [
        {
         title: "leaf 1-8-1",
         chenshow: true,
        },
        {
         title: "leaf 1-8-1",
         chenshow: true,
        },
       ],
      },
      {
       title: "parent 1-9",
       chenshow: false,
       expand: true,
       children: [
        {
         title: "leaf 1-9-1",
         chenshow: true,
        },
        {
         title: "leaf 1-9-1",
         chenshow: true,
        },
       ],
      },
     ],
    },
   ],

5-1.注意 这个 return中绑定的数据,可以参考 iview官方文档,地址如下:

https://www.iviewui.com/components/tree

6.在 methods中添加如下代码:

chentreelick(data) {
   console.log(data);
   console.log("点击了");
   console.log(data[0].chenshow);
  },
  
  //注意:参数 data,在点击的时候可以获取到后台的数据,这个数据是来自后台的,在实际开发中,我们可以 利用 data,把后台需要的id传给 后台

到此这篇关于vue+iview使用树形控件的具体使用的文章就介绍到这了,更多相关vue iview 树形控件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
浅析Angular19 自定义表单控件
Jan 31 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 Javascript
在antd Form表单中select设置初始值操作
Nov 02 #Javascript
react+antd 递归实现树状目录操作
Nov 02 #Javascript
antd form表单数据回显操作
Nov 02 #Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 #Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 #Javascript
JavaScript实现刮刮乐效果
Nov 01 #Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 #Javascript
You might like
PHP中显示格式化的用户输入
2006/10/09 PHP
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
三年大学自我鉴定
2014/01/16 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
SQL Server中的游标介绍
2022/05/20 SQL Server