コンテンツ
3番目の変更矢印が開いて折りたたまれます+1つと2つのカスタムアイコン：
4つ目は、el-treeの前にチェックボックスとアイコンを追加することです。
最初のトグル矢印が開いて折りたたまれます。
<template>
<div class="tree">
<el-tree
:data="data5"
:props="props"
show-checkbox
node-key="id"
default-expand-all
>
</el-tree>
</div>
</template>
<script>
export default {
data() {
return {
props: {
label: "label",
children: "children",
},
data5: [
{
id: 1,
label: "一级 1",
icon: "el-icon-success",
children: [
{
id: 4,
label: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1",
icon: "el-icon-info",
},
{
id: 10,
label: "三级 1-1-2",
},
],
},
],
},
{
id: 2,
label: "一级 2",
children: [
{
id: 5,
label: "二级 2-1",
},
{
id: 6,
label: "二级 2-2",
},
],
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1",
},
{
id: 8,
label: "二级 3-2",
},
],
},
],
};
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-icon-caret-right:before {
content: "y";
font-size: 16px;
}
::v-deep .expanded:before {
content: "x";
font-size: 16px;
}
</style>
2番目の変更矢印が開いて折りたたまれます+アニメーション：
<template>
<div class="tree">
<el-tree
icon-class="user"
:data="data5"
:props="props"
show-checkbox
node-key="id"
default-expand-all
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span> <i :class="node.icon"></i>{
{ node.label }} </span>
</span>
</el-tree>
</div>
</template>
<script>
export default {
data() {
return {
props: {
label: "label",
children: "children",
},
data5: [
{
id: 1,
label: "一级 1",
icon: "el-icon-success",
children: [
{
id: 4,
label: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1",
icon: "el-icon-info",
},
{
id: 10,
label: "三级 1-1-2",
},
],
},
],
},
{
id: 2,
label: "一级 2",
children: [
{
id: 5,
label: "二级 2-1",
},
{
id: 6,
label: "二级 2-2",
},
],
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1",
},
{
id: 8,
label: "二级 3-2",
},
],
},
],
};
},
};
</script>
<style lang="scss" scoped>
/deep/.user {
// background: url("../../assets/logo.png");
background: url("../../assets/logo.png");
box-sizing: border-box;
background-size: 100%;
background-repeat: no-repeat;
}
/deep/.el-tree-node__expand-icon {
transform: rotate(-90deg);
}
/deep/.el-tree-node__expand-icon.expanded {
transform: rotate(0deg);
}
</style>
3番目の変更矢印が開いて折りたたまれます+1つと2つのカスタムアイコン：
<template> <div class="ov-container"> <el-tree :data="data" :props="defaultProps"> <span class="custom-tree-node" slot-scope="{ node, data }"> <i v-if="node.level == 1" class="province" /> <i v-else-if="node.level == 2" class="city" /> <i v-else-if="node.level == 3" /> { { data.label }} </span> </el-tree> </div> </template> <script> export default { name: "index", data() { return { data: [ { label: "一级 1", children: [ { label: "二级 1-1", children: [ { label: "三级 1-1-1", }, ], }, ], }, { label: "一级 2", children: [ { label: "二级 2-1", children: [ { label: "三级 2-1-1", }, ], }, { label: "二级 2-2", children: [ { label: "三级 2-2-1", }, ], }, ], }, { label: "一级 3", children: [ { label: "二级 3-1", children: [ { label: "三级 3-1-1", }, ], }, { label: "二级 3-2", children: [ { label: "三级 3-2-1", }, ], }, ], }, { label: "一级 4", children: [ { label: "三级 3-2-1", }, ], }, { label: "一级 4", }, ], }; }, }; </script> <style scoped lang="scss"> .ov-container { height: calc(100vh - 80px); background: #ffffff; border-radius: 5px; margin: 10px; } .province { background: url("../../assets/logo.png"); width: 17px; height: 14px; display: inline-block; background-size: 100% 100%; } .city { background: url("../../assets/图片2.png") no-repeat; width: 17px; height: 14px; display: inline-block; background-size: 100% 100%; } .line { background: url("../../assets/百花.png") no-repeat; background-size: 100%; width: 17px; height: 14px; display: inline-block; } .data { background: url("../../assets/花朵.png") no-repeat; background-size: 100%; width: 17px; height: 14px; display: inline-block; } .el-tree /deep/ .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); } //有子节点 且未展开 .el-tree /deep/ .el-icon-caret-right:before { // background: url("../../assets/logo.png") no-repeat 0 0; content: "√"; display: block; width: 12px; height: 12px; font-size: 16px; background-size: 100% 100%; } //有子节点 且已展开 .el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before { // background: url("../../assets/logo.png") no-repeat 0 0; content: "x"; display: block; width: 12px; height: 12px; font-size: 12px; background-size: 100% 100%; } //没有子节点 .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before { // background: url("../../assets/logo.png") no-repeat 0 0; content: ""; display: block; width: 12px; height: 12px; font-size: 16px; background-size: 100% 100%; } </style>
4つ目は、el-treeの前にチェックボックスとアイコンを追加することです。
更新しています。。。
2022/3/19 15:45