ElementUI控件el-tree方法renderContent的使用

文章已阅读次

renderContent并不会影响代码中既定tree数据层结构渲染加载；

这里的作用是根据tree的特定level调整其样式：

el-tree

<el-tree

                :render-content="renderContent"

                :data="treedata"

                default-expand-all

                :show-checkbox="showcheckbox"

                highlight-current

                node-key="itemId"

                :expand-on-click-node="false"

                @node-click="handleNodeClick"

                :props="ItemProps"

                v-loading="ISload"

                ref="tree"

                @check-change="itemCheckChange"

                style="margin-top: 1em;"

              ></el-tree>

Method

    renderContent(h, { node, data, store }) {  

      if (node.level === 1) {

        return <span class='firstlevel'>{node.label}</span>;

      } else {

        return <span class='notfirstlevel'>{node.label}</span>;

      }

    },