美文网首页
ElementUI Tree树形控件renderContent返

ElementUI Tree树形控件renderContent返

作者: 双耳云 | 来源:发表于2019-12-05 15:20 被阅读0次

使用ElementUI Tree树形控件中属性:render-content指定渲染函数renderContent,该函数返回需要的节点区内容

renderContent (h, { node, data, store }) {
    if (node.isLeaf) {
      return (
        <span 
            class="custom-tree-node" 
            id={node.id} 
            on-mouseover={() => this.nodeOver(node, data)} 
            on-mouseout={() => this.nodeOut(node, data)} 
            style={this.typeNumber === data.id ? 'color: #00a0ff !important' : ''}>
            <span>{node.label}</span>
            <span class="btn-custom">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                    <el-button size="medium" 
                        icon="el-icon-edit" 
                        type="text" 
                        on-click={() => this.getDicType(node, data, store)}>
                    </el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                    <el-button size="medium" 
                        icon="el-icon-delete" 
                        type="text" 
                        on-click={() => this.removeDicType(node, data)}>
                    </el-button>
                </el-tooltip>
          </span>
        </span>)
    } else {
      return (
        <span 
            class="custom-tree-node" 
            id={node.id} 
            on-mouseover={() => this.nodeOver(node, data)} 
            on-mouseout={() => this.nodeOut(node, data)}
            style={this.activeIndex === data.id ? 'color: #00a0ff !important' : ''}>
            <span>{node.label}</span>
            <span class="btn-custom">
                <el-tooltip class="item" effect="dark" content="添加" placement="top-start">
                    <el-button size="medium" 
                        icon="el-icon-plus" 
                        type="text" 
                        on-click={() => this.openAddDicType(node, data, store)}>
                    </el-button>
                </el-tooltip>
            </span>
      </span>)
    }
}

相关文章

网友评论

      本文标题:ElementUI Tree树形控件renderContent返

      本文链接:https://www.haomeiwen.com/subject/jxgdgctx.html