使用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菜单插件superfish使用指南
Apr 21 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
js实现简单的打印表格
Jan 15 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框架实现发送短信验证功能代码
2016/06/06 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
pymssql ntext字段调用问题解决方法
2008/12/17 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
大学生旷课检讨书
2014/01/22 职场文书
岗位职责的构建方法
2014/02/01 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
银行授权委托书样本
2014/10/13 职场文书
五年级上册复习计划
2015/01/19 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
介绍一下28个JS常用数组方法
2022/05/06 Javascript
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS