个人企业邮箱怎么申请,关键词优化报价,房管局网上备案查询,建筑招聘平台本篇文章借鉴于此处#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使用的地方不用加这样最外层可以监听到子组件发出的事件。
