<template> <ul> <TreeItem v-for="(item, index) in treeData" :key="index" :treeItemData="item" :tree-click-event="treeClickEvent"></TreeItem> </ul> </template> <script> import TreeItem from "./TreeItem"; export default { name: "VueTreeMenu", components: { TreeItem }, props: { // 树形控件数据 treeData: { type: Array, default(){ return []; } }, // 节点点击事件 treeClickEvent: { type: Function, default() { return function () {}; } } } } </script> <style lang="stylus"> .vue-tree{ list-style: none; padding: 0; margin: 0; .tree-item{ cursor: pointer; transition: background-color .2s; .tree-content{ position: relative; padding-left: 28px; &:hover{ background-color: #f0f7ff; } } .expand-arrow{ position: absolute; top: 0; left: 0; width: 28px; height: 28px; cursor: pointer; &::after{ position: absolute; top: 50%; left: 50%; display: block; content: ' '; border-width: 5px; border-style: solid; border-color: transparent; border-left-color: #ccc; margin: -5px 0 0 -2.5px; transition: all .2s; } } &.expand{ &>.tree-content{ background-color: #f0f7ff; &>.expand-arrow{ &::after{ transform: rotate(90deg); margin: -2.5px 0 0 -5px; } } } } .tree-label{ height: 28px; line-height: 28px; font-size: 14px; } .sub-tree{ display: none; list-style: none; padding: 0 0 0 28px; margin: 0; } &.expand>.sub-tree{ display: block; } &.no-child{ &>.tree-content{ /*padding-left: 0;*/ &>.expand-arrow{ display: none; } } } } } </style>
5、使用树形组件
<template> <div> <VueTree :tree-data="treeData2" :tree-click-event="treeClickEvent"></VueTree> </div> </template> <script> import VueTree from "./components/vue-tree/VueTree"; export default { name: 'app', data(){ return { treeData2: [ { text: "一级", // 显示的文字 expand: false, // 默认是否展开 children: [ { text: "二级-1", expand: false, }, { text: "二级-2", expand: false, children: [ { text: "三级-1", expand: false, }, { text: "三级-2", expand: false, children: [ { text: "四级-1", expand: false, } ] } ] } ] }, { text: "一级-2", expand: false } ] } }, methods: { treeClickEvent(item, treeItem){ console.log(item); } }, components: { VueTree } } </script>
总结
以上所述是小编给大家介绍的vue递归组件实战之简单树形控件实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: