<el-tree :data="treeData" :props="defaultProps" show-checkbox :render-content="renderContent"
@check-change="handleCheckChange" >
</el-tree>
data数据：
treeData: [{
id: 1,
label: "一级节点 1",
children: [{
id: 2,
label: "二级节点 1-1"
},
{
id: 3,
label: "二级节点 1-2"
}
]
},
{
id: 4,
label: "一级节点 2",
children: [{
id: 5,
label: "二级节点 2-1"
},
{
id: 5,
label: "二级节点 2-1"
},
{
id: 5,
label: "二级节点 2-1"
}
]
}
],
defaultProps: {
children: "children",
label: "label"
},
方法：
renderContent(h, {
node,
data,
store
}) {
const isTopLevel = node.level === 1;
return ( <
span class = "custom-tree-node" > {
isTopLevel && ( <
img src = {
node.checked ? require('@/assets/33.png') : require('@/assets/32.png')
}
alt = "Node Image"
style = "width: 16px; height: 16px; vertical-align: middle; margin-right: 5px;" /
>
)
} {
node.label
} <
/span>
);
},
handleCheckChange(data, checked, indeterminate) {
this.$refs.tree.updateKeyChildren(data.id);
},
如果都需要图片：去掉isTopLevel即可，
如果是图标：在el-tree中添加插槽（也是父节点有图标，反之去掉判断）
<span slot-scope="{ node, data }" class="slot-t-node">
<template>
<i v-if="node.level === 1" :class="{
'el-icon-folder': !node.expanded, // 节点收缩时的图标
'el-icon-folder-opened': node.expanded, // 节点展开时的图标
'el-icon-user-solid': data.type === 2 // data.type是后端配合提供的识别字段，最后一级
}" style="color: #409eff;" />
<span>{{ node.label }}</span>
</template>
</span>
