使用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 相关文章推荐
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
JavaScript 反射学习技巧
Oct 16 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
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
Python中多线程及程序锁浅析
2015/01/21 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
大二学生学习个人自我评价
2014/01/19 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
质量保证书范本
2014/04/29 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
Django操作cookie的实现
2021/05/26 Python
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server