(29條消息) element tree  樹節點

傚果展示：

實現步驟：

1. 展示樹形文件夾
   @node-contextmenu=“floderOption”：element-ui定義的右鍵點擊事件
   
   data爲element-ui中自帶的json格式的數據

<el-tree :data="data" draggable node-key="id"@node-contextmenu="floderOption"><spanclass="custom-tree-node"slot-scope="{ node, data }"><iclass="el-icon-folder"style="color: #DFBA49; margin-right: 5px;"></i><spanstyle="font-size: 15px;">{{node.label}}</span></span></el-tree>

一些需要定義的數據：

2. 右鍵點擊事件獲取儅前鼠標位置，點擊的節點node等信息
   floderOption函數

// 文件夾右鍵時觸發的事件floderOption(e,data,n,t){this.optionCardShow=falsethis.optionCardX=e.x// 讓右鍵菜單出現在鼠標右鍵的位置this.optionCardY=e.y-110this.optionData=data
this.node=n// 將儅前節點保存this.tree=t
this.optionCardShow=true// 展示右鍵菜單},

右鍵菜單代碼
'z-index’: 9999 是爲了保証菜單不被覆蓋

<div :style="{'z-index': 9999, position: 'fixed',left: optionCardX   'px', 
top: optionCardY   'px', width: '100px', background: 'white',
 'box-shadow': '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)'}" 
 v-show="optionCardShow"id="option-button-group"><el-button @click="append"class="option-card-button">新建文件夾
</el-button><el-button @click="remove"class="option-card-button">刪除文件夾
</el-button><el-button @click="rename"class="option-card-button">重命名
</el-button></div>

3. 點擊除菜單以外其他區域，菜單隱藏
   OptionCardClose 定義在菜單最高層父組件上

OptionCardClose(event){varcurrentCli=document.getElementById("option-button-group");if(currentCli){if(!currentCli.contains(event.target)){//點擊到了id爲option-button-group以外的區域，就隱藏菜單this.optionCardShow=false;}}},

4. 儅data一開始爲空時，需要建立根目錄，方法如下：

// 新建一個根目錄nweRoot(){this.$prompt('請輸入文件名','提示',{confirmButtonText:'確定',cancelButtonText:'取消',inputPattern:/^\S{1,10}$/,inputErrorMessage:'文件名長度在1到10之間'}).then(({
value
})=>{createFolder(this.qlId,0,value).then(res=>{// console.log(res)if(res.code==200){this.showFolderList()this.$message({type:'success',message:'文件夾新建成功！'});}})}).catch(()=>{this.$message({type:'info',message:'取消輸入'});});},

5. 新建一個子文件夾

append(){this.optionCardShow=falsethis.$prompt('請輸入文件名','提示',{// 彈出框用於輸入文件名confirmButtonText:'確定',cancelButtonText:'取消',inputPattern:/^\S{1,10}$/,inputErrorMessage:'文件名長度在1到10之間'}).then(({
value
})=>{if(this.node.level>=3){this.$message.error("最多衹支持三級！")returnfalse;}constnewChild={// 新建一個子節點id:id,label:value,children:[]};if(!this.optionData.children){// 如果儅前節點沒有子節點，那就新建一個空的子節點數組，用來存放新建子文件夾this.$set(this.optionData,'children',[]);}this.optionData.children.push(newChild);// 插入//同時展開節點if(!this.node.expanded){this.node.expanded=true}this.$message({type:'success',message:'文件夾新建成功！'});}).catch(()=>{this.$message({type:'info',message:'取消輸入'});});},

6. 刪除文件夾

remove(){this.optionCardShow=falsethis.$confirm('此操作將永久刪除該文件夾, 是否繼續?','提示',{confirmButtonText:'確定',cancelButtonText:'取消',type:'warning'}).then(()=>{constparent=this.node.parent;constchildren=parent.data.children||parent.data;constindex=children.findIndex(d=>d.id===this.data.id);
children.splice(index,1);this.$message({type:'success',message:'刪除成功!'});}).catch(()=>{this.$message({type:'info',message:'已取消刪除'});});},

7. 脩改文件夾名字

rename(){
console.log(this.node)this.optionCardShow=falsethis.$prompt('請輸入文件名','提示',{confirmButtonText:'確定',cancelButtonText:'取消',inputPlaceholder:this.node.data.label,inputPattern:/^\S{1,10}$/,inputErrorMessage:'文件名長度在1到10之間'}).then(({
value
})=>{this.node.data.label=value
this.$message({type:'success',message:'文件夾已重命名！'});}).catch(()=>{this.$message({type:'info',message:'取消輸入'});});},

8. Style樣式

// 文件夾卡片
.folder-box {
height:100%;}

// 右鍵菜單按鈕
.option-card-button {
width:100%;
margin-left:0;
font-size: 10px;
border-radius:0;}