vue使用Element的Tree樹形控件實現拖動改變節(jié)點順序方式
項目完成后,產品又提新需求,
通過拖動能夠改變下面的組織順序,又給我增加了好大的工作量!
先吐槽產品一波,怎么早先不想好呢!
首先要想實現拖動改變順序,那我從后端查詢得來的數據
treeList
首先就必須有順序,
后端為了實現節(jié)點有順序—在實體類中又增加了一個字段
原先類實體
public class OrgNode {
private String id;
private String name;
private String parentId;
}
增加了一個brotherId
當前類實體
public class OrgNode {
private String id;
private String name;
private String parentId;
private String brotherId;
}后端
1.新增節(jié)點
每當我新增一個節(jié)點時,就把他的brotherId設為 “-1”,
如果新增節(jié)點所在的層級之前沒有節(jié)點,那不需要處理;
如果新增節(jié)點所在的層級之前有節(jié)點,那么把之前brotherId為-1的節(jié)點的brotherId改為新增節(jié)點的id
2.刪除節(jié)點
當刪除節(jié)點時,為保證順序,需要把 被刪節(jié)點 后一個節(jié)點的brotherId 改為 被刪節(jié)點的 brotherId,
這樣這一層級的節(jié)點順序才不會出錯
以上寫了一點后端的做法,下面來詳細講解前端實現
屬性結構的代碼
<el-tree :draggable="true" @node-drop="testTrop" :allow-drop="dropPosition" :data="organization" node-key="id" :current-node-key="currentNode" :default-expanded-keys="keys" :expand-on-click-node="false"
@node-click="nodeClick" :props="defaultProps" ref='treeOrg' :filter-node-method='filterNode' highlight-current>
<span class="custom-tree-node" slot-scope="{ node, data }">
<el-tooltip v-if="node.label.length>10" :content='node.label' placement="top-start" effect="dark"
popper-class="atooltip">
<span>{{node.label | showTreeName}}</span>
</el-tooltip>
<span v-else>{{ node.label }}</span>
<span v-if="node.data.id==selectId">
<el-button type="text" icon="el-icon-edit" size="mini" @click.stop=" () => updateOrganization(data)"></el-button>
<el-button type="text" icon="el-icon-delete" size="mini" @click.stop="() => remove(node, data)"></el-button>
</span>
</span>
</el-tree>
該組織樹的使用
1.draggabl.是否開.拖拽功能
2.allow-dro.拖拽時判定目標節(jié)點能否被放置。
3.node-dro.拖拽成功觸發(fā)的事. 主要是我們 把數據發(fā).后端
4.dat.我們要展示的數. 從后端獲取. treeList
5.node-ke.每個樹節(jié)點用來作為唯一標識的屬性，整棵樹應該是唯一的
6.current-node-ke.當前選中的節(jié)點
7.default-expanded-key.默認展開的節(jié)點.key 的數.. 就是我們 想展開節(jié)點.id 數組
8.expand-on-click-nod. 是否在點擊節(jié)點的時候展開或者收縮節(jié)點， 默認值為 true，如果為 false，則只有點箭頭圖標的時候才會展開或者收縮節(jié)點。
9.node-clic.節(jié)點被點擊時的回.. 節(jié)點被點擊.我們想做什么. 一般是查詢
10.prop...主要用.指定 我們想展示節(jié)點.的那兩個屬. 屬性.必須和 從后端得到數據.屬性名 相對應
11.re..ref被用來給元素或子組. 注. 引用信息.引用信息將會注冊在父組件的 $refs對象上。
12.filter-node-metho. 對樹節(jié)點進行篩選時執(zhí)行的方法，返回 true 表示這個節(jié)點可以顯示，返回 false 則表示這個節(jié)點會被隱藏
13.highlight-curren. 是否高亮當前選中節(jié)點，默認值是 false。
14.el-toolti. 文字提. 用法 <el-tooltip> 要展示的內.</el-tooltip. 給這個 內容 做一些提示
. 當前我們前端要達到的效果.如果文字過. 很后面以省略號結. 但是有必須 讓用.看.該條數據的全部內.所以.文字提示.方法去達到目的
. 當前這個文字提. 已經添..v-i.判斷字數大于1.才會生效
........... v-els. 就顯示原本的字數
這里主要講解拖拽的兩個屬性,一個事件
- 屬性 draggable 是否開啟 拖拽功能
- 屬性 allow-drop 拖拽時判定目標節(jié)點能否被放置。
- 事件 node-drop 拖拽成功觸發(fā)的事件 主要是我們 把數據發(fā)給 后端
第一個draggable沒什么好講的
第三個node-drop用法也簡單
本人主要是
我被該屬性卡住了
因為我的是有一個限制,同級中不能有同名組織,
所以需要判定 被拖組織 能否置于 目標組織 前面,后面,或者內部
dropPosition(draggingNode, dropNode, type) {
console.log(draggingNode);
console.log(dropNode);
console.log(type);
//這三個參數 是我們在頁面拖動時 我們停止拖動時 會自動生成的參數三個參數
// 轉移節(jié)點draggingNode 目標節(jié)點dropNode 置于目標節(jié)點的位置 type='prev'、'inner' 和 'next' 三個中其中一個
if (type === "inner") {
checkOrganizationName(draggingNode.data.id, draggingNode.data.name, dropNode.data.id).then(data => {
if (data.data.data === true) {
//說明目標節(jié)點內部存在 與轉移節(jié)點 相同名稱的 節(jié)點,不能轉入
//那我們不設返回值 就不會觸發(fā)移動事件
} else {
return "inner";
}
});
} else if (type === "prev" || type === "next") {
//判斷轉移節(jié)點 能否放置于 目標節(jié)點的 前面或者后面
checkOrganizationName(draggingNode.data.id, draggingNode.data.name, dropNode.data.parentId).then(data => {
if (data.data.data === true) {
//說明 前后不能放
//那我們也不設返回值 就不會觸發(fā)移動事件
} else {
return type;
}
});
}
},
所以不能通過向后端發(fā)請求的方式,判斷能否放于 目標位置
應該通過比較前端已經有的數據,判斷能否放于目標位置
processDataTree(data) {
for (let index in data) {
let obj = data[index];
this.organizationTemp.push({id: obj.id, name: obj.name, parentId: obj.parentId});
if (obj.children !== null && obj.children.length > 0) {
this.processDataTree(obj.children);
}
}
},
getOrganizationTemp() {
getOrganization().then(data => {
this.organizationAfterMove = data.data.data;
this.organizationTemp = [];
this.processDataTree(this.organizationAfterMove);
});
},
dropPosition(draggingNode, dropNode, type) {
//這三個參數 是我們在頁面拖動時 我們停止拖動時 會自動生成的參數三個參數
// 轉移節(jié)點draggingNode 目標節(jié)點dropNode 置于目標節(jié)點的位置 type='prev'、'inner' 和 'next' 三個中其中一個
if (type === "inner") {
if (dropNode.data.children===null){
//目標節(jié)點沒有子節(jié)點 可以直接放入
return "inner"
}else {
let childArray=dropNode.data.children;
for (let i = 0; i < childArray.length; i++) {
if (childArray[i].name===draggingNode.data.name){
return
}
}
return "inner"
}
} else if (type === "prev" || type === "next") {
let existObj;
for (let i = 0; i <this.organizationTemp.length; i++) {
let obj = this.organizationTemp[i];
if(obj.parentId === dropNode.data.parentId && obj.name === draggingNode.data.name && obj.id!==draggingNode.data.id){
existObj=obj;
}
}
if (existObj) {
} else {
return type;
}
}
},
testTrop(before,after,inner,event){
changeParentOrg(before.data.id,after.data.id,inner,this.$getCookie().getUserName());
setTimeout(()=>{this.getOrganizationTemp()},500);
},
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在本篇文章里小編給大家整理的是關于VUE中表格的寫法實例以及相關知識點內容，需要的朋友們可以參考下。2019-08-08
隨著前端技術的飛速發(fā)展,Vue.js作為一個流行的JavaScript框架,已經被廣泛應用于構建現代Web應用,然而,隨著應用的復雜性和規(guī)模的增加,性能優(yōu)化也成為開發(fā)者必須面對的重要任務,在本篇博客中,我們將探討幾種常用的Vue性能優(yōu)化方法,需要的朋友可以參考下2024-12-12
這篇文章主要為大家詳細介紹了vue實現手風琴效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
$emit是Vue實例的一個方法,它用于觸發(fā)自定義事件,本文主要為大家詳細介紹了Vue如何使用$emit進行組件通信,感興趣的小伙伴可以跟隨小編咦學習一下2023-12-12
這篇文章主要介紹了vue再次進入頁面不會再次調用接口請求問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。接下來通過本文給大家介紹Vuejs第十二篇之動態(tài)組件，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
本文主要介紹了Vue實現Echarts圖表寬高自適應的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要給大家介紹了關于uniapp微信小程序axios庫的封裝及使用的相關資料,Axios是一個基于promise網絡請求庫,作用于node.js和瀏覽器中axios-miniprogram-adapteraxios的小程序適配器,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue 的渲染器是如何對節(jié)點進行掛載和更新的,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-05-05
在日常的開發(fā)中,加載效果是非常常見的,但是怎么才能方便的使用,本文介紹如何實現vue加載指令 v-loading,感興趣的朋友一起看看吧2024-01-01