慈溪市规划建设网站,wordpress安装上传文件,广州有哪些建筑公司,seo技术培训价格表本篇文章借鉴于此处#xff0c;如果只需显示树形组件#xff0c;可以直接访问该博主文章。我这里对他的组件做了扩展#xff0c;增加了点击展开和关闭操作#xff0c;话不多说上代码。 1.数据结构 const data {label: 根目录,children: [{label: 目录A,children: [// 叶…本篇文章借鉴于此处如果只需显示树形组件可以直接访问该博主文章。我这里对他的组件做了扩展增加了点击展开和关闭操作话不多说上代码。 1.数据结构 const data {label: 根目录,children: [{label: 目录A,children: [// 叶子节点{label: 目录A1}]}, {label: 目录B}] 2. 节点(Node.js) templatediv div:classisExpand node.label?parent active:parent:stylegetLevelStyle(level)clickshowChild(node)span{{node.label}}/spanspan v-show!isNode()gt;/span/divdiv v-show!isNode() isExpand node.label!-- 在这里引用node自身完成递归操作 --node :nodenode v-for(node, i) of node.children :keyi :levellevel1 v-bind$attrs v-on$listeners/node/div/div/templatescript export default {name: Node,props: {node: Object,level: {type: Number,default: 0}},components: {// 这里不需要引用node自身},data() {return {isExpand: null}},methods: {isNode() {return !this.node.children || this.node.children.length 0},showChild(node) {if (this.isNode()) {this.$emit(nodeClick, node)} else {if (this.isExpand node.label) {this.isExpand null} else {this.isExpand node.label}}},getLevelStyle(level) {return { margin-left: level * 20 px }}}} /scriptstyle langscss scoped.parent {background: #F2F2F6;border-radius: 10px;padding: 12px;margin-bottom: 5px;display: flex;justify-content: space-between;}.active{background: #D3D3DC;} /style 3.组合成树(TreeNode.js) templatediv stylepadding: 20px 10px;Node :nodetreeData v-bind$attrs v-on$listeners/Node/div/templatescript import Node from ./Node export default {name: TreeNode,props: {treeData: Object},components: {Node},methods: {nodeClick(data) {this.$emit(nodeClick, data)}}} /scriptstyle scoped/style 4.使用 templatedivTreeNode :tree-datatreeData nodeClicknodeClick/TreeNode/div /templatescript import TreeNode from ./TreeNode; export default {name: HelloWorld,components: {TreeNode},data () {return {treeData: {label: A,children: [{label: A-1,children: [{label: A-1-1,children: [{label: A-1-1-1},{label: A-1-1-2}]},{label: A-1-2,children: [{label: A-1-2-1}]},{label: A-1-3,children: [{label: A-1-3-1}]}]}, {label: B-1,children: [{label: B-1-1},{label: B-1-2}]}]}}},methods:{nodeClick(data) {console.log(Node click, data)}} } /scriptstyle scoped /style 5. 显示效果 6. 总结 遇到一个难题就是子组件往最外层传递事件在网上找到了答案需要在内层组件加 v-bind$attrs v-on$listeners使用的地方不用加这样最外层可以监听到子组件发出的事件。