父组件
<template>
<div id="app">
<!-- //引用组件，将数据动态传递给组件-->
<!-- 弹窗start-->
<a-modal
:centered="true"
title="保存病历"
:visible="treemodalvisible"
:confirm-loading="treemodalLoading"
:ok-text="treemodalLoading==true?'提交修改中':'确定'"
@ok="handleOk"
@cancel="treemodalvisible=false"
>
<Tree :list="list" />
</a-modal>
<!-- 弹窗end-->
</div>
</template>
<script>
import Tree from './treeson'
export default {
components:{
Tree,//注册组件
},
data(){
return {
treemodalvisible:true,
//递归组件的数据
list:[{
data:'数据1',
open:true,
id:1,
children:[{
data:'数据1-1',
open:true,
id:2,
children:[{
data:'数据1-1-1',
open:true,
id:3,
children:[{
data:'哈哈哈',
open:true,
id:123,
children:[{
data:'哈哈哈打灯',
open:true,
id:43223,
}]
},{
data:'哈哈哈给她',
open:true,
id:53422
}]
}]
},{
data:'数据1-2',
open:true,
id:4
}]
},{
data:'数据2',
open:true,
id:5,
children:[{
data:'数据2-1',
open:true,
id:6
},{
data:'数据2-2',
open:true,
id:7
}]
},{
data:'数据3',
open:true,
id:8
}]
}
},
methods:{
handleOk(){
}
}
}
</script>
子组件
<template>
<div>
<!-- 弹窗start-->
<a-modal
:centered="true"
:title="editOrAdd=='edit'?`编辑“${chosedTitle}”文件夹名`:`新增”${chosedTitle}“文件夹子集`"
:visible="treemodalvisible"
:confirm-loading="treemodalLoading"
:ok-text="treemodalLoading==true?'提交修改中':'确定'"
@ok="handleOk"
@cancel="treemodalvisible=false"
>
<a-row>
<a-col :span="10" style="text-align: right;height: 32px;line-height: 32px">
<span v-if="editOrAdd=='add'">新增文件夹名：</span>
<span v-if="editOrAdd=='edit'">编辑文件夹名：</span>
</a-col>
<a-col :span="10">
<a-input placeholder="请输入文件夹名" v-model="inputName" />
</a-col>
<a-col :span="4" />
</a-row>
</a-modal>
<!-- 弹窗end-->
<ul class="mingTree">
<li
:class="[item.children?'leftBorder':'']"
v-for="(item) in list "
:key="item.id"
@click.stop="open(item)"
>
<span
@mouseover="hoverIndex = item.id"
@mouseleave="hoverIndex = null"
class="itemText"
>
<span style="margin: 0 10px 0 0">
<a-icon v-if="item.children" :type="item.open?'folder-open':'folder'" />
<a-icon
v-else
type="file"
style="font-size: 10px"
/>
{{ item.data }}
</span>
<a-button-group v-if="item.id == hoverIndex">
<a-button
size="small"
type="primary"
@click.stop="add(item)"
>
增加子集
</a-button>
<a-button
size="small"
type="primary"
@click.stop="update(item)"
>
修改
</a-button>
<a-button
@click.stop="del(item)"
size="small"
>
删除
</a-button>
</a-button-group>
</span>
<!-- //将children传递给组件，实现递归-->
<Tree :list="item.children" v-show="item.open" />
</li>
</ul>
</div>
</template>
<script>
export default {
name:'Tree',//自己调用自己
data(){
return{
chosedTitle:'',
editOrAdd:'',
treemodalvisible:false,
treemodalLoading:false,
inputName:'',
hoverIndex:null
}
},
props:{
list:{type:Array,default:()=>[]}
},
methods:{
open(item) {
//树形结构的打开与关闭
console.log('展开')
item.open = !item.open
},
del(item) {
console.log('删除')
//删除--->根据id找相应的数组下标
for(let i in this.list) {
console.log(this.list[i])
if(this.list[i].id == item.id){
if(this.list[i].children){
this.$message.error('删除项包含子文件夹，不允许删除')
}else{
this.list.splice(i,1)
}
}
}
},
//确认操作（编辑或者新增）
handleOk(item) {
if(this.checkNull(this.inputName)){
this.$message.error('文件夹名不能为空')
return
}
if(this.editOrAdd == 'add'){
!item.children && this.$set(item,'children',[{data:this.inputName.trim(),open:true,id:item.id+'-'+item.id}])
item.children && item.children.push({data:this.inputName.trim(),open:true,id:item.id+'-'+item.id})
this.treemodalvisible = false
}else if(this.editOrAdd == 'edit'){
if(this.chosedTitle == this.inputName){
this.$message.warning('和原文件夹名一样')
return
}else{
console.log('进来了')
item.data = this.inputName.trim()
this.treemodalvisible = false
}
}
this.inputName = ''
},
// 编辑
update(item){
this.editOrAdd = 'edit'
this.treemodalvisible = true
this.chosedTitle = item.data
this.inputName = item.data
},
//增加
add(item) {
console.log(item)
//没有children的添加children属性，但是要保证新加进来的数据也可以被劫持--->this.$set()
//this.$set(要改变的对象，要改变对象里的属性，属性的值)三个参数
this.editOrAdd = 'add'
this.treemodalvisible = true
this.chosedTitle = item.data
},
checkNull(str) {
if (str == "") {
return true
}
if (str == "undefined") {
return true
}
var regu = "^[ ]+$"
var re = new RegExp(regu)
return re.test(str)
}
}
}
</script>
<style scoped>
span{display: inline-block}
li{width: auto;display: block}
.mingTree{
position: relative;margin: 4px 20px
}
.itemText{
height: 24px;line-height: 24px; cursor: pointer;
}
.itemText:hover{ color: #000000;font-weight: 600; }
/*.mingTree li:not(:last-child):before{*/
/* position: absolute;*/
/* left: 12px;*/
/* width: 1px;*/
/* height: calc(100% - 44px);*/
/* margin: 22px 0 0;*/
/* border-left: 1px solid #bbbbbb;*/
/* content: " ";*/
/*}*/
</style>
