使用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中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
JS精确判断数据类型代码实例
Dec 18 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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横向重复区域显示二法
2008/09/25 PHP
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
python使用epoll实现服务端的方法
2018/10/16 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
计算s=f(f(-1.4))的值
2014/05/06 面试题
个人租房协议书(范本)
2014/10/14 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL