el-tree自定义内容
<template>
<div class="root" style="display: flex;">
<div
class="left"
style="width: 50%; border-right: 1px solid #ccc; padding-right: 20px"
>
<!-- node-click 是tree的节点被点击时的回调，共三个参数：传递给data属性的数组中该节点对应的对象、节点对应的Node、节点组件本身 -->
<!-- props label指定节点标签为节点对象的某个属性值，比如代码中label: label,表示节点展示的内容是 数据中label属性的值 -->
<el-tree
:data="data"
:props="defaultProps"
node-key="id"
default-expand-all
:expand-on-click-node="false"
@node-click="handleNodeClick"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<el-tooltip :content="node.label" placement="right">
<span>{{ node.label }}</span>
</el-tooltip>
<span class="icon" style="margin-left: 10px">
<i class="el-icon-circle-plus"></i>
<i v-if="!data.children" class="el-icon-delete-solid"></i>
</span>
</span>
</el-tree>
</div>
<div class="right" style="padding-left: 20px;width: 50%;" v-if="isShow">
<el-descriptions title="相关信息" :column="1">
<el-descriptions-item label="标题">{{ desData.title }}</el-descriptions-item>
<el-descriptions-item label="描述" v-if="!desData.children">{{ desData.label }}</el-descriptions-item>
</el-descriptions>
</div>
</div>
</template>
<script>
export default {
data() {
const data = [
{
id: 1,
label: "一级 1",
title: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
title: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1",
title: "三级 1-1-1",
},
{
id: 10,
title: "三级 1-1-2",
label: "三级 1-1-2",
},
],
},
],
},
{
id: 2,
label: "一级 2",
title: "一级 2",
children: [
{
id: 5,
label: "二级 2-1",
title: "二级 2-1",
},
{
id: 6,
label: "二级 2-2",
title: "二级 2-2",
},
],
},
{
id: 3,
label: "一级 3",
title: "一级 3",
children: [
{
id: 7,
label: "二级 3-1",
title: "二级 3-1",
},
{
id: 8,
label: "二级 3-2",
title: "二级 3-2",
},
],
},
];
return {
data: JSON.parse(JSON.stringify(data)),
desData:[],
defaultProps: {
children: 'children',
label: 'label'
},
isShow: false
};
},
methods: {
handleNodeClick(data){
this.desData=data
this.isShow=true
}
},
};
</script>