宁远县建设局网站,自己做网站前期困难吗,网易163企业邮箱官网,免费推广软件本篇文章借鉴于此处#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使用的地方不用加这样最外层可以监听到子组件发出的事件。
