<template>
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :render-content="renderContent">
</el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
label: "一级 1",
color: "yellow",
children: [
{
label: "二级 1-1",
color: "green",
children: [
{
label: "三级 1-1-1",
color: "red",
},
],
},
],
},
{
label: "一级 2",
color: "yellow",
children: [
{
label: "二级 2-1",
color: "green",
children: [
{
label: "三级 2-1-1",
color: "cyan",
},
],
},
{
label: "二级 2-2",
color: "green",
children: [
{
label: "三级 2-2-1",
color: "red",
},
],
},
],
},
],
defaultProps: {
children: "children",
label: "label",
},
};
},
methods: {
handleNodeClick(data) {
console.log(data);
},
renderContent(h, { node, data, store }) {
// 如果是子节点，添加色块
if (!data.children && data.color) {
return h("span", [
h("span", {
style: {
display: "inline-block",
width: "20px",
height: "20px",
backgroundColor: data.color, // 生成随机颜色或指定颜色
marginRight: "8px",
verticalAlign: "middle",
},
}),
h("span", node.label),
]);
} else {
// 如果是父节点，不添加色块
// return h('span', node.label);
return h("span", [
h("span", {
style: {
display: "inline-block",
width: "20px",
height: "20px",
backgroundColor: data.color, // 生成随机颜色或指定颜色
marginRight: "8px",
verticalAlign: "middle",
},
}),
h("span", node.label),
]);
}
},
},
};
</script>
<style></style>
