原创 

Element UI Tree 自定义样式之 render-content

分类:前端    896人阅读    IT小君  2022-09-27 22:29

展示数据:

      treeData:[
          {
              id:"1",
              name:"schoolDb",
              type:"category",
              children:[
                  {id:"1-1", name:"user_t", type:'rain'},
                  {id:"1-2", name:"class_t", type:'rain'},
                  {id:"1-3", name:"grade_t", type:'rain'},
              ]
          }
      ]

标签代码:

        <el-tree ref="myTree" :data="treeData"
                 :props="defaultProps"
                   :default-expand-all="true"
                 :render-content="renderContent">

        </el-tree>

renderContent 函数:

renderContent:function (h,{node,data,store}) {
            let addElement = arguments[0];
            if(data.type === 'rain'){
                return addElement('span',[
                    addElement('i',{class:"fa fa-file-text-o"}),
                    addElement('span',"    "),
                    addElement('span',arguments[1].node.label)
                ]);
            }else{
                return addElement('span',[
                    addElement('i',{class:"catalogue"}),
                    addElement('span',"    "),
                    addElement('span',arguments[1].node.label)
                ]);
            }
        }

 

效果演示:https://yy123.ink/codeDetail/15412

支付宝打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

 工具推荐 更多»