使用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 相关文章推荐
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
js替代copy(示例代码)
Nov 27 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
node.js通过axios实现网络请求的方法
Mar 05 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 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 如何利用phpexcel导入数据库
2013/08/24 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
详解Vue方法与事件
2017/03/09 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
React实现全选功能
2020/08/25 Javascript
python 模拟银行转账功能过程详解
2019/08/06 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
公司总经理工作职责管理办法
2014/02/28 职场文书
报效祖国演讲稿
2014/09/15 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
领导干部作风建设总结
2014/10/23 职场文书
高中班长竞选稿
2015/11/20 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript