// tree-item.vue
< template>
< div class = " tree-item" >
< div @click = " handleToggle(list)" @dblclick = " handleDblClick(list)" class = " tree-title" >
< el-icon v-if = " hasChild" :color = " ' blue'" :size = " 15" @click = " add(list)" >
< CirclePlus />
</ el-icon>
< el-icon v-else :color = " ' blue'" :size = " 15" @click = " tips(list)" >
< Remove />
</ el-icon>
< el-icon v-if = " hasChild && list.label != '根目录'" :color = " ' blue'" :size = " 15" @click = " tips(list)" >
< Remove />
</ el-icon>
< h4 style = " margin-left : 5px" > {{ list.label }}</ h4>
</ div>
< div v-show = " open" class = " child-content" >
< tree-item v-for = " (item, index) in list.children" :list = " item" :key = " index" > </ tree-item>
</ div>
</ div>
</ template>
< script>
import { ElMessage } from "element-plus" ;
export default {
name : "TreeItem" ,
props : {
list : {
type : [ Object, Array] ,
required : true
}
} ,
data ( ) {
return {
open : false
} ;
} ,
computed : {
hasChild ( ) {
return this . list. children && this . list. children. length;
}
} ,
methods : {
add ( list ) {
console. log ( list) ;
ElMessage ( {
message : ` 增加数据 ` ,
type : "warning"
} ) ;
} ,
tips ( list ) {
ElMessage ( {
message : ` 删除 ${ list. label} ` ,
type : "warning"
} ) ;
} ,
handleToggle ( list ) {
console. log ( list) ;
if ( this . hasChild) {
this . open = ! this . open;
}
} ,
handleDblClick ( list ) {
console. log ( 111 ) ;
ElMessage ( {
message : ` 修改 ${ list. label} 名称 ` ,
type : "warning"
} ) ;
}
}
} ;
</ script>
< style lang = " less" scoped >
.tree-item {
font-size : 15px;
cursor : pointer;
.tree-title {
display : flex;
justify-content : flex-start;
align-items : center;
}
}
.child-content {
margin-left : 20px;
}
</ style>
// tree.vue
< template>
< div class = " tree-wrap" >
< div v-for = " (item, index) in dataSource" :key = " index" >
< tree-item :list = " item" > </ tree-item>
</ div>
</ div>
</ template>
< script>
import TreeItem from "./tree-item.vue" ;
export default {
name : "tree" ,
props : {
dataSource : {
type : [ Object, Array] ,
required : true
}
} ,
components : {
TreeItem
}
} ;
</ script>
< style scoped >
.tree-wrap {
width : 100%;
}
</ style>
// 父组件引入
import xTree from "./tree.vue";
< template>
< x-tree :data-source = " tree" > </ x-tree>
</ template>
< script lang = " ts" >
export default defineComponent ( {
setup ( ) {
let tree = reactive ( [
{
label : "根目录" ,
children : [
{
label : "车辆" ,
children : [
{
label : "出租车"
} ,
{
label : "公交车"
}
]
} ,
{
label : "企业"
} ,
{
label : "人员"
}
]
}
] ) ;
}
) }
</ script>