使用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 autocomplete自动完成插件的的使用方法
Aug 07 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
详解微信小程序的 request 封装示例
Aug 21 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
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
python学习开发mock接口
2019/04/28 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
Python数组并集交集补集代码实例
2020/02/18 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
网站客服岗位职责
2014/04/05 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
个人先进材料范文
2014/12/30 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS