最近在项目中，设计将tree组件里最底层的节点布局设计成了多列，那要怎么实现呢？
首先用自定义节点的方式渲染节点，在渲染方法里给最底层节点添加class
renderContent(h, { node, data, store }) {let classname = '';if (node.childNodes.length === 0) {classname = 'floatRight';} else if (node.childNodes.length > 0) {classname = 'clearFloat';}return <span class={classname}>{node.label}</span>;}
添加class后，在节点展开的事件里给需要多列显示的节点添加样式
@node-expand="handleNodeExpand"handleNodeExpand() {this.changeCss();},changeCss() {this.$nextTick(() => {var levelName = document.getElementsByClassName('floatRight');for (var i = 0; i < levelName.length; i++) {let parentNode = levelName[i].parentNode;parentNode.style.cssFloat = 'left';parentNode.style.styleFloat = 'left';}var clearFloat = document.getElementsByClassName('clearFloat');for (var i = 0; i < clearFloat.length; i++) {let parentNode = clearFloat[i].parentNode;parentNode.style.clear = 'both';parentNode.style.clear = 'both';}});}
最终效果
