el-tree+vue+js实现修改树结构单选以及输入框

 

---

如图所示，点击左侧查看权限，点击修改可以进行修改选择，并带有input输入框以及单选框进行配置

element+vue展示代码：

render函数返回数据：

    renderContent(h, { node, data, store }) {
      if (node.childNodes.length > 0) {
        // if(node.data.befId==124){
        //   return (
        //     
        //       {node.data.vMenuName}
        //     
        //   );
        // }else 
        if(node.data.befId!=124){
          return (
            
              {node.data.vMenuName}
            
          );
        }
        
      } else {
        if (node.data.pid == 124) {
          // return ('')
          // return (
          //   
          //   
          //   
          //    {node.data.vMenuName}
          //   
          //   
          // );
        }else if (node.data.pfid == 124) {
          // return ('')
          // if(node.data.isInput){
          //   return (
          //     
          //     
          //       
          //       
          //       {node.data.vMenuName}
          //       天
          //         
          //     
          //   );
          // }else{
          //   return (
          //     
          //     
          //       
          //       
          //       {node.data.vMenuName}
          //       
          //     
          //   );
          // }
        } else {
          return (
            
              {node.data.vMenuName}
            
          );
        }
      }
    },
    renderContentNocheck(h, { node, data, store }) {
      if (node.childNodes.length > 0) {
        if (node.data.isPower) {
          return (
            
              {node.data.vMenuName}
            
          );
        } else {
          return (
            
              {node.data.vMenuName}
            
          );
        }
      } else {
        if (node.data.pfid == 124) {
          if(node.data.isInput){
            if (node.data.isPower){
              return (
              
                {node.data.vMenuName}
                {node.data.msgtime}
              
            );
            }else{
              return (
              
                {node.data.vMenuName}
                {node.data.msgtime}
              
            );
            }
          }else if (node.data.isPower) {
            return (
              
                {node.data.vMenuName}
              
            );
          }else{
            return (
              
                {node.data.vMenuName}
              
            );
          }
        }else {
          if (node.data.isPower) {
            return (
              
                {node.data.vMenuName}
              
            );
          } else {
            return (
              
                {node.data.vMenuName}
              
            );
          }
        }
      }
    }

带有输入框以及单选条件的部分：

     
     
 历史消息读取
     

      按自然日
      
       最近7天
       最近15天
        最近30天
       自定义天数
        天
        
         
         按消息日
         (有交互记录的1自然日为1消息日)
        
      
      最近7天
      最近15天
       最近30天
      自定义天数
       天
      
      
        按消息条数
        
         最近100条
         最近300条
         最近500条
          自定义条数
         条
        
      
   

自己添加的点击收缩事件，仿照jquery的slidedown

   clickBy(){
      let slide = {       
          down : function(div){
            div.style.height='140px';
          },              
          up : function(div){
            div.style.height='0';
          }
        }
        function toggleSlide(id,s){
            var div = document.getElementById(id),
            div_height = div.offsetHeight;
            div.style.transition='height '+s+'ms';  
            div.style.overflow='hidden';                    
            if(div_height){
                slide.up(div);
            }else{
                slide.down(div);
            }
        }
        toggleSlide('groupRadioBox','300')
      let classN=this.$refs.caret.className
      if(classN=='el-icon-caret-bottom'){
        this.$refs.caret.setAttribute("class",'el-icon-caret-right')
      }else{
        this.$refs.caret.setAttribute("class",'el-icon-caret-bottom')
      }
    }