el-tree知识积累

<el-tree :data="treedatalist" 
show-checkbox 
default-expand-all 
:check-strictly="true" 
node-key="id" ref="tree" 
:default-checked-keys="mycheckedkeys" 
@check-change="handleCheckChange"　　　　　　　 
:render-content="renderContent">
:props="defaultProps">
</el-tree>

method：{
 renderContent (h, { node, data, store }) {
 return (
 <span class="custom-tree-node">
 <span>{node.label}&nbsp;&nbsp;</span>
 <span>
 <el-button size="mini" type="text" icon="el-icon-delete" on-click={() => this.remove(node, data)}></el-button>
 <el-button size="mini" type="text" icon="el-icon-edit" on-click={() => this.edit(node, data)}></el-button>
 </span>
 </span>);
 },
}

 

:check-strictly="true" 选择父节点时子节点不会被一起选中

:default-checked-keys="mycheckedkeys" 设置默认选中的节点

this.$refs.tree.getCheckedKeys() 获取被选中节点的id

:render-content="renderContent"> 渲染el-tree renderContent增加删除、编辑节点的按钮