element ui tree组件使用render函数自定义节点内容，隐藏或者显示(附带点击子节点双击事件)

<el-treeref="tree"class="stafftree":data="devicesTreeData":props="defaultProps"node-key="id"@node-click="handleNodeClick":render-content="renderContent":default-checked-keys="checkedKeys":default-expanded-keys="defaultExpandedKeys"></el-tree>

handleNodeClick(item, node, self){this.treeClickId = item.id;this.treeClickCnt++;// 注册清空点击次数计时器任务
  window.clearTimeout(this.treeClickTimeout);this.treeClickTimeout = window.setTimeout(()=>{this.treeClickCnt =0;},500);// 连续点击多次则不做任何事情if(this.treeClickCnt >2)return;// 单击事件if(this.treeClickCnt ==1){// do something}// 双击事件if(this.treeClickCnt ==2&& item.data.dataType =="point"){// do something}},// render函数使用// 下边的数据都是我获取的数据，要根据数据进行显示什么或者隐藏什么或者需要做什么操作renderContent(h,{ node, data }){if(data.expand){if(data.data.dataType =="point"){returnh('span',{class:'custom-node'},[h('el-checkbox',{class:'custom-checkbox',props:{value:this.checkedKeys.includes(data.id)// 根据选中的节点的id判断复选框是否选中},// on: {//   change: value => {//     console.log('val', value);//     if (value) {//       this.checkedKeys = [data.id]; // 更新选中的节点的id//     } //     else {//       this.checkedKeys = []; // 清空选中的节点的id//       data.expand = false;//       this.selectName.presetName = '';//     }//   }// }}),h('span',{class:'custom-label'}, data.label)]);}else{h('span',{class:'custom-label'}, data.label)}}elseif(!data.expand){if(data.data.dataType =="point"){returnh('span',{class:'custom-node'},[
       data.data.checked ?h('i',{class:'custom-icon el-icon-check'}):h('i'),this.highlightCurrent == data.data.id ?h('span',{class:'custom-label1'}, data.label):h('span',{class:'custom-label'}, data.label)]);}else{returnh('span',{class:'custom-node'},[// h('i', { class: 'custom-icon el-icon-check' }),h('span',{class:'custom-label2'}, data.label)]);}}},

示例：

<template><div><!-- @check-change="checkChange"  --><el-treeref="tree"class="stafftree":data="editCBRdata":props="defaultProps"node-key="id"@node-click="handleNodeClick()":render-content="renderContent"></el-tree><divid="result"></div><div></div></div></template><script>exportdefault{name:'demotree',data(){return{editCBRdata:[{label:'一级 1',children:[{label:'二级 1-1',children:[{label:'三级 1-1-1'}]}]},{label:'一级 2',children:[{label:'二级 2-1',children:[{label:'三级 2-1-1'}]},{label:'二级 2-2',children:[{label:'三级 2-2-1'}]}]},{label:'一级 3',children:[{label:'二级 3-1',children:[{label:'三级 3-1-1'}]},{label:'二级 3-2',children:[{label:'三级 3-2-1'}]}]},{label:'一级 4',children:[{label:'二级 4-1',children:[{label:'三级 4-1-1',children:[{label:'四级 4-1-1'}]}]},{label:'二级 4-2',children:[{label:'三级 4-2-1',children:[{label:'四级 4-1-1'}]}]}]},{label:'一级 5',children:[{label:'二级 5-1',children:[{label:'三级 5-1-1',children:[{label:'四级 5-1-1',children:[{label:'五级 5-1-1'}]}]}]},{label:'二级 5-2',children:[{label:'三级 5-2-1',children:[{label:'四级 5-1-1',children:[{label:'五级 5-1-1',value:"checkbox"},{label:'五级 5-2-1',value:"checkmark"},{label:'五级 5-3-1'}]}]}]}]}],defaultProps:{children:'children',label:'label'},editCheckId:null,checkedKeys:[]// 用于存储选中的节点的id};},mounted(){this.nameHeader();},methods:{nameHeader(){let a ={name:'age',age:'2'};let c ={...a };
      console.log('c', c);this.$nextTick(()=>{var resultElement = document.getElementById("result");// console.log('resultElement', resultElement);let arr =[1,2,3];for(let index =0; index <= arr.length; index++){var numberSpan = document.createElement("div");// 将返回值设置为元素的文本内容
          numberSpan.textContent = arr[index];
          resultElement.appendChild(numberSpan);}})},handleNodeClick(item, node, self){
      console.info(1)
      console.log(item, node, self);// event.stopPropagation();this.editCheckId = item.id;this.$refs.tree.setCheckedKeys([item.id]);},// checkChange(item, node, self) {//   alert(2)//   if (node) {//     this.editCheckId = item.id;//     this.checkedKeys = [item.id]; // 更新选中的节点的id//   } else {//     if (this.editCheckId === item.id) {//       this.checkedKeys = [item.id]; // 更新选中的节点的id//     }//   }// },renderContent(h,{ node, data }){if(data.value ==='checkbox'){returnh('span',{class:'custom-node'},[h('el-checkbox',{class:'custom-checkbox',// props: {//   value: this.checkedKeys.includes(data.id) // 根据选中的节点的id判断复选框是否选中// },on:{change:($events, value)=>{alert('change');
                console.log('value', $events, value,)if(value){this.checkedKeys =[data.id];// 更新选中的节点的id}else{this.checkedKeys =[];// 清空选中的节点的id}}}}),h('span',{class:'custom-label'}, data.label)]);}elseif(data.value ==='checkmark'){returnh('span',{class:'custom-node'},[h('i',{class:'custom-icon el-icon-check'}),h('span',{class:'custom-label'}, data.label)]);}else{returnh('span',{class:'custom-node'},[h('span',{class:'custom-label'}, data.label)]);}},},beforeDestroy(){
    console.log('卸载之前');},destroyed(){
    console.log('卸载之后');}};</script><stylescoped>/* :deep(.stafftree > .el-tree-node > .el-tree-node__content .el-checkbox) {
  display: none;
} */.custom-node{display: flex;align-items: center;}:deep(.custom-checkbox){margin-right: 225px;}</style>

另一种写法不用h的写法