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 写的简单进度条控件
Jan 22 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
理解javascript async的用法
Aug 22 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 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面向对象——访问修饰符介绍
2012/11/08 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP错误处理函数
2016/04/03 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
python爬取哈尔滨天气信息
2018/07/14 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
Python实现图片识别加翻译功能
2019/12/26 Python
python中加背景音乐如何操作
2020/07/19 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
软件测试有哪些?什么是配置项?
2012/02/12 面试题
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers