vue elementui tree 임의의 단계 드래그 기능 코드
<el-tree
draggable :allow-drop="allowDrop" @node-drop="sort"
accordion style="font-size:14px;width:250px;"
ref="tree" :data="catalogList" :props="defaultProps" :expand-on-click-node="false"
node-key="id" :highlight-current="true" :load="loadNode"
lazy :render-content="renderContent" @node-click="handleNodeClick"
empty-text=" ">
allowDrop(draggingNode, dropNode, type){
//
/* if (draggingNode.data.level === dropNode.data.level) {
if (draggingNode.data.aboveId === dropNode.data.aboveId) {
return type === 'prev' || type === 'next'
}
} else {
//
return false
} */
//
if (draggingNode.data.aboveId === dropNode.data.aboveId) {
return type === 'prev' || type === 'next'
} else {
return type === 'prev' || type === 'next' || type === 'inner'
}
},
//
/*
* draggingNode: Node
* dropNode:
* type: (before、after、inner)
* event
*/
sort(draggingNode,dropNode,type,event) {
console.log(draggingNode)
console.log(dropNode)
if (draggingNode.data.aboveId === dropNode.data.aboveId) {
let obj = {
aboveId:'',
arr:[]
}
obj.aboveId = dropNode.data.aboveId
for (let item of dropNode.parent.childNodes) {
obj.arr.push(item.data.id)
}
console.log(obj)
this.updateOrderMe(obj)
} else {
let obj = {
aboveId:'',
id:'',
newAboveId:''
}
obj.aboveId = draggingNode.data.aboveId
obj.id = draggingNode.data.id
obj.newAboveId = dropNode.data.id
this.randomDrag(obj)
}
},
randomDrag(obj) {
this.$http
.post(url, obj).then(res =>{
if (!res.data.success) {
this.$message.warning(res.data.msg)
}
})
},
updateOrderMe(obj) {
this.$http
.post(url, {
aboveId:obj.aboveId,
ids: obj.arr
}).then(res =>{
if (!res.data.success) {
this.$message.warning(res.data.msg)
}
})
}
보충 지식:element-ui tree 동급 드래그 실현나는 쓸데없는 말을 더 이상 하지 않겠다. 모두들 코드를 직접 보는 것이 좋겠다.
<template>
<div>
<el-tree
draggable
:allow-drop="allowDrop"
@node-drop="sort"
ref="tree"
:data="data2"
:props="defaultProps"
show-checkbox
default-expand-all
node-key="id"
highlight-current
></el-tree>
<div class="buttons">
<el-button @click="getCheckedNodes"> node </el-button>
<el-button @click="getCheckedKeys"> key </el-button>
<el-button @click="setCheckedNodes"> node </el-button>
<el-button @click="setCheckedKeys"> key </el-button>
<el-button @click="resetChecked"> </el-button>
</div>
</div>
</template>
<script>
// import draggable from "vuedraggable";
// import Sortable from "sortablejs";
export default {
methods: {
getCheckedNodes() {
console.log(this.$refs.tree.getCheckedNodes());
},
getCheckedKeys() {
console.log(this.$refs.tree.getCheckedKeys());
},
setCheckedNodes() {
this.$refs.tree.setCheckedNodes([
{
id: 5,
label: " 2-1"
},
{
id: 9,
label: " 1-1-1"
}
]);
},
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([3]);
},
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
}
},
mounted() {
const el = document.querySelectorAll(".el-tree")[0];
console.log(el);
},
data() {
return {
data2: [
{
id: 1,
label: " 1",
children: [
{
id: 4,
label: " 1-1",
prop: "4"
}
]
},
{
id: 2,
label: " 2",
children: [
{
id: 5,
label: " 2-1",
prop: "5"
},
{
id: 6,
label: " 2-2",
prop: "6"
}
]
},
{
id: 3,
label: " 3",
children: [
{
id: 7,
label: " 3-1",
prop: "7"
},
{
id: 8,
label: " 3-2",
prop: "9"
}
]
},
{
id: 9,
label: " 4"
}
],
defaultProps: {
children: "children",
label: "label"
},
allowDrop(draggingNode, dropNode, type) {
if (draggingNode.level === dropNode.level) {
if (draggingNode.parent.id === dropNode.parent.id) {
// ||
return type === "prev" || type === "next";
}
} else {
//
return false;
}
},
sort(draggingNode, dropNode, type, event) {
// console.log(' ')
// console.log("<><><>>><><<><><><><><><><>")
//
// console.log(dropNode.parent); //dropNode.parent.childNodes =[]
let obj = {
aboveId: "",
arr: []
};
obj.aboveId = dropNode.data.aboveId;
for (let item of dropNode.parent.childNodes) {
obj.arr.push(item.data.id);
}
}
};
}
};
</script>
이상의 이 vue elementui tree 임의의 단계 드래그 기능 코드는 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.