功能点
-
树形结构的搜索过滤功能，官网有，稍微配置一下即可
-
树形结构的样式二次修改，
-
树形结构的图标的展示，3中状态，未打开的文件状态，打开时的文件状态，最后一级的文件状态
tree树形
细节
-
tree绑定的data数据，最后一级要设置 children: [],不然会影响显示，实际开发也会设置
-
icon图标是在iconfont图标库下载cvg图片到本地库
-
可能因为图标大小问题导致的基线对不起问题，设置基线对齐即可
-
判断文件状态，通过自定义插槽的方式，在数据渲染时添加i标签，从而显示图标 通过el-tree通过的节点展开事件，在控制台输出data、node、element后可以观察发现，当点击展开节点时，node中存在一个expanded参数且值为 true：通过data.children.length === 0 是不是最后一个
代码如下
<template>
<div class="holder">
<el-row :gutter="20">
<!-- 左边 -->
<el-col :xs="24" :sm="8" :lg="4">
<div class="left">
<el-input
placeholder="请输入分类名称"
v-model="filterText"
suffix-icon="el-input__icon el-icon-search"
clearable
>
</el-input>
<el-tree
class="filter-tree"
:data="data"
:props="defaultProps"
:filter-node-method="filterNode"
@node-expand="handlerNodeExpand"
ref="tree"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>
<img
style="vertical-align: text-top"
v-if="data.children.length !== 0"
:src="[node.expanded ? treeicon.one : treeicon.two]"
alt=""
/>
<img
style="vertical-align: text-top"
v-if="data.children.length === 0"
:src="treeicon.there"
alt=""
/>
{
{ node.label }}
</span>
</span>
</el-tree>
</div>
</el-col>
<!-- 右边 -->
<el-col :xs="24" :sm="16" :lg="20">
<div class="right"></div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
// 搜索分类
filterText: "",
data: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1",
icon: "el-icon-info",
children: [],
},
{
id: 10,
label: "三级 1-1-2",
icon: "el-icon-info",
children: [],
},
],
},
],
},
{
id: 2,
label: "一级 2",
children: [
{
id: 5,
label: "二级 2-1",
children: [],
},
{
id: 6,
label: "二级 2-2",
children: [],
},
],
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1",
children: [],
},
{
id: 8,
label: "二级 3-2",
children: [],
},
],
},
],
defaultProps: {
children: "children",
label: "label",
},
// 图标数据
treeicon: {
one: require("@/assets/images/空文件.svg"),
two: require("@/assets/images/文件夹.svg"),
there: require("@/assets/images/文件.svg"),
},
};
},
watch: {
// 调用 Tree 实例的filter方法，参数为关键字
filterText(val) {
this.$refs.tree.filter(val);
},
},
mounted() {},
methods: {
// 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点被展开时触发的事件
handlerNodeExpand(data, node, element) {
window.console.log(data);
window.console.log(node);
window.console.log(element);
},
},
};
</script>
<style lang="scss" scoped>
.holder {
padding: 20px 25px;
height: 887px;
.left {
height: 848px;
border: 1px solid #ccc;
overflow: hidden;
box-sizing: border-box;
padding: 20px 20px 0;
::v-deep .el-input__inner {
border: 1px solid #1997c9;
border-radius: 0;
// color: #fff;
// background-color: #072a4f;
}
::v-deep .el-tree-node.is-current > .el-tree-node__content {
// 设置颜色 el-tree 选中节点的颜色
background-color: rgba(135, 206, 235, 0.2);
color: #409eff; // 节点的字体颜色
font-weight: bold; // 字体加粗
}
::v-deep .el-tree-node__content:hover {
background-color: #66b1ff87;
}
::v-deep .el-tree {
// background-color: #f2f2f2;
// color: red;
margin-top: 30px;
}
}
.right {
width: 100%;
height: 848px;
border: 1px solid #ccc;
}
}
</style>注：不能直接复制，需要下载图标到本地
经过这一趟流程下来相信你也对 饿了吗 tree树形结构 显示文件图标 搜索 更改样式 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！
什么不足的地方请大家指出谢谢 -- 風过无痕
扫描二维码关注公众号，回复： 14879515 查看本文章