Elementui中的tree在数据前⾯添加⾃定义图标可以使⽤ el-tree 标签实现 在节点区添加按钮或图标等内容
也可以通过class来⾃定义图标
<template>
<div class="my-tree-main">
<el-tree
:
data="treeData"
:props="defaultProps"
:render-content="renderContent"
:highlight-current="showTree" <!-- highlight-current ⾼亮显⽰不让背景消失 -->
>
</el-tree>
</div>
</template>
<script>
export default {
name: "MyTree",
data() {
return {
showTree: true,
treeData: [
{
id: "1",
name: "schoolDb",
type: "category",
children: [
{ id: "1-1", name: "user_t", type: "rain" },
{ id: "1-2", name: "class_t", type: "rain" },
{ id: "1-3", name: "grade_t", type: "rain" },
],
},
],
defaultProps: {
//el-tree 树结构默认渲染的字段
children: "children",
label: "name",
isLeaf:'isLeaf'
},
//  这个函数要的是要返回⼀个dom结构，具体为啥应该是和组件有关系
/
/  传参第⼀个应该是⼀个dom节点，后⾯会⽤到，但是我不知道为什么不直接取⽽是再去取⾃⾝的，可能会有好处吧
// 第⼆个就是ES6的结构写法
renderContent: function (h, { node, data, store }) {
/**
这个addElement等于的是⼀个⾃⾝的索引为0的东西
我也不晓得这是个啥回来console看看吧
⼤概率是⼀个dom结构或者是新增dom的东西
*/
let addElement = arguments[0];
// 这⾥判断这个rain类型，是和上⾯ children 有关系
/*
反正在最后返回了⼀个dom元素，⼀个i标签和俩span标签
i标签添加个类名是放置icon图标，后⾯空span不知道⼲嘛的
最后⼀个span是吧你要填写的⽂字传进去，他拿的是⾃⾝的索引为1的⾥⾯的我懂了，这个索引应该就是参数，这⾥拿到的是第⼆个参数中的数据
*/
if (pe === "rain") {
return addElement("span", [
addElement("i", { class: "el-icon-picture" }), //可以⾃定义图标
addElement("span", "    "),
addElement("span", arguments[1].node.label),
]);
} else {
return addElement("span", [
icon图标库addElement("i", { class: "icon" }), // 类名⾃定义图标
addElement("span", "    "),
addElement("span", arguments[1].node.label),
]);
}
},
};
},
};
</script>
<style scoped>
.icon {
width:10px;
height:10px;
background:url('../img/icon.jpg');
background-size:100% 100%;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。