时间:2021-05-25
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"> .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); } .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 实现树组件的资料请关注其它相关文章!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了Vue树形组件的示例代码,分享给大家,具体如下:使用SemanticUI和vue做一个menubar组件,实现方法大概是这样的:0">{{item.t
本文实例为大家分享了vue文件树组件的实现方法,供大家参考,具体内容如下本文主要是分析vue官方仓库里的文件树组件[vuegithub]demo可以查看http
1.组件是什么组件系统是Vue的一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。通常一个应用会以一棵嵌套的组件树的形式来组
vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。这种方式下一个组件生成一个js文件用例:{path:'/promisedemo',na
将之前的用css3+jq实现的横向树样式简单封装成组件使用到vue项目中,文件名为transverseTree.vue代码:{{column.name}}{{c