使用Vue实现一个树组件的示例


Posted in Javascript onNovember 06, 2020

HTML代码:

<!DOCTYPE html>
<html>
<head>
  <title>Vue Demo</title>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style type="text/css">
    /* span样式 */
    .treeviewitem-span {
      font-size: 14px;
    }

    /* 箭头样式 */
    .treeviewitem-arrow-icon {
      margin-top: 3px;
      margin-left: 3px;
      margin-right: 3px;
      float: left;
      width: 0;
      height: 0;
      border-top-width: 6px;
      border-right-width: 0px;
      border-bottom-width: 6px;
      border-left-width: 6px;
      border-style: solid;
      border-color: transparent transparent transparent #666666;
      transform: rotate(0deg);
    }

    /* 90度旋转箭头样式 */
    .treeviewitem-arrow-icon90 {
      margin-top: 3px;
      margin-left: 3px;
      margin-right: 3px;
      float: left;
      width: 0;
      height: 0;
      border-top-width: 6px;
      border-right-width: 0px;
      border-bottom-width: 6px;
      border-left-width: 6px;
      border-style: solid;
      border-color: transparent transparent transparent #666666;
      transform: rotate(90deg);
    }

    /* 模板隐藏 */
    template {
      display: none;
    }
  </style>

  <script type="text/javascript" src="vue.js"></script>
  <script type="text/javascript">

  </script>
</head>
<body>
  <!-- treeviewitem模板 -->
  <template id="treeviewitem">
    <div>
      <div style="background-color:transparent; cursor:default; height:25px;"><div v-on:click="expand" style="width:16px; height:16px; float:left; background-color:transparent;"><span v-bind:class="[self.expand ? 'treeviewitem-arrow-icon90':'treeviewitem-arrow-icon']" v-if="isLeaf"></span></div><input type="checkbox" v-on:click="checkboxClick" v-model="self.selected" /><span v-on:click="itemClick" class="treeviewitem-span">{{ self.name }}</span></div>
      <div v-if="self.expand" v-for="item in items" style="margin-left:20px;">
        <treeviewitem v-bind:items="item.items" v-bind:self="item"></treeviewitem>
      </div>
    </div>
  </template>

  <!-- treeview模板 -->
  <template id="treeview">
    <div>
      <div v-for="item in items">
        <treeviewitem v-bind:items="item.items" v-bind:self="item"></treeviewitem>
      </div>
    </div>
  </template>

  <div id="app">
    <!-- 使用treeview组件 -->
    <treeview v-bind:items="items"></treeview>
    <br />
    <button onclick="showSelectedResult()">勾选结果</button>
  </div>

  <script type="text/javascript">
    //定义treeviewitem组件
    Vue.component('treeviewitem', {
      props: ['items', 'self'],
      template: '#treeviewitem',
      methods: {
        itemClick: function (d) {
          alert("您单击了节点:" + this.self.name);
        },
        checkboxClick: function (e) {
          var checkChild;
          checkChild = function (items, checked) {
            for (var i = 0; i < items.length; i++) {
              var item = items[i];
              item.selected = checked;
              if (item.items) {
                checkChild(item.items, checked)
              }
            }
          };

          if (e.target.checked) {
            checkChild(this.items, true);
          } else {
            checkChild(this.items, false);
          }
        },
        expand: function (e) {
          if (this.self.expand) {
            this.self.expand = false;
          } else {
            this.self.expand = true;
          }
        }
      },
      computed: {
        isLeaf: function () {
          if (this.items && this.items.length > 0) {
            return true;
          }
          return false;
        }
      }
    });

    //定义treeview组件
    Vue.component('treeview', {
      props: ['items'],
      template: '#treeview'
    });

    //定义vm
    var vm = new Vue({
      el: '#app',
      methods: {
        /**
         * @description 获取勾选结果
         */
        getSelected: function (items) {
          if (!items) items = this.items;

          var result = [];
          for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (item.selected) {
              result.push(item.name);
            }
            if (item.items) {
              var childSelected = this.getSelected(item.items);
              for (var k = 0; k < childSelected.length; k++) {
                result.push(childSelected[k]);
              }
            }
          }
          return result;
        }
      },
      data: {
        items: [
          {
            name: '条目1',
            expand: true,
            selected: false,
            items: [
              {
                name: '条目11',
                expand: true,
                selected: false,
                items: [
                  {
                    name: '条目111',
                    expand: true,
                    selected: true,
                  }
                ]
              },
              {
                name: '条目12',
                expand: false,
                selected: false,
                items: [
                  {
                    name: '条目121',
                    expand: true,
                    selected: false,
                  },
                  {
                    name: '条目122',
                    expand: true,
                    selected: false,
                    items: [
                      {
                        name: '条目1221',
                        expand: true,
                        selected: false
                      },
                      {
                        name: '条目1222',
                        expand: true,
                        selected: false
                      }
                    ]
                  }
                ]
              },
              {
                name: '条目13',
                expand: true,
                selected: false
              }
            ]
          },
          {
            name: '条目2',
            expand: true,
            selected: false
          },
          {
            name: '条目3',
            expand: true,
            selected: false,
            items: [
              {
                name: "条目31",
                expand: true,
                selected: false
              }
            ]
          }
        ]
      }
    })

    //显示勾选结果
    function showSelectedResult() {
      var selected = vm.getSelected();
      alert("您勾选了:" + selected.join(', '));
    }
  </script>
</body>
</html>

效果图:

使用Vue实现一个树组件的示例

以上就是使用Vue实现一个树组件的示例的详细内容,更多关于vue 实现树组件的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
jquery 弹出层实现代码
Oct 30 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 #Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 #Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 #Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 #Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 #Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 #Javascript
如何利用vue实现波谱拟合详解
Nov 05 #Javascript
You might like
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
python基础教程之字典操作详解
2014/03/25 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
关于Python数据结构中字典的心得
2017/12/04 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
python for循环remove同一个list过程解析
2019/08/14 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
如何将字串String转换成整数int
2015/02/21 面试题
一道SQL面试题
2012/12/31 面试题
如何通过jdbc调用存储过程
2012/04/19 面试题
优秀学生自我鉴定范例
2013/12/18 职场文书
大学自我评价
2014/02/12 职场文书
优秀教师工作感言
2014/02/16 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
新年寄语大全
2014/04/12 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
联谊会开场白
2015/06/01 职场文书
事业单位岗位说明书
2015/10/08 职场文书
2016大一新生军训感言
2015/12/08 职场文书
Python中request的基本使用解决乱码问题
2022/04/12 Python