快捷導(dǎo)航

vue elementui tree 任意級(jí)別拖拽功能代碼

更新時(shí)間：2020年08月31日 10:14:26 作者：心向陽(yáng)光，便是晴天

這篇文章主要介紹了vue elementui tree 任意級(jí)別拖拽功能代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

我的是根據(jù)父級(jí)id做的一些判斷

<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="暫無(wú)數(shù)據(jù)">
 
   allowDrop(draggingNode, dropNode, type){
   //注掉的是同級(jí)拖拽
   /* if (draggingNode.data.level === dropNode.data.level) {
    if (draggingNode.data.aboveId === dropNode.data.aboveId) {
     return type === 'prev' || type === 'next'
    }
   } else {
    // 不同級(jí)進(jìn)行處理
    return false
   } */
   //任意級(jí)別拖拽
   if (draggingNode.data.aboveId === dropNode.data.aboveId) {
     return type === 'prev' || type === 'next'
   } else {
    return type === 'prev' || type === 'next' || type === 'inner'
   }
  },
  //拖拽完成之后要重新排序
  /* 
  * draggingNode：被拖拽節(jié)點(diǎn)對(duì)應(yīng)的 Node
  * dropNode：結(jié)束拖拽時(shí)最后進(jìn)入的節(jié)點(diǎn)
  * type: 被拖拽節(jié)點(diǎn)的放置位置（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)
	    }
    })
  }

補(bǔ)充知識(shí)：element-ui tree 實(shí)現(xiàn)同級(jí)拖拽

我就廢話不多說(shuō)了，大家還是直接看代碼吧~

<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">通過(guò) node 獲取</el-button>
   <el-button @click="getCheckedKeys">通過(guò) key 獲取</el-button>
   <el-button @click="setCheckedNodes">通過(guò) node 設(shè)置</el-button>
   <el-button @click="setCheckedKeys">通過(guò) key 設(shè)置</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: "二級(jí) 2-1"
    },
    {
     id: 9,
     label: "三級(jí) 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: "一級(jí) 1",
     children: [
      {
       id: 4,
       label: "二級(jí) 1-1",
       prop: "4"
      }
     ]
    },
    {
     id: 2,
     label: "一級(jí) 2",
     children: [
      {
       id: 5,
       label: "二級(jí) 2-1",
       prop: "5"
      },
      {
       id: 6,
       label: "二級(jí) 2-2",
       prop: "6"
      }
     ]
    },
    {
     id: 3,
     label: "一級(jí) 3",
     children: [
      {
       id: 7,
       label: "二級(jí) 3-1",
       prop: "7"
      },
      {
       id: 8,
       label: "二級(jí) 3-2",
       prop: "9"
      }
     ]
    },
    {
     id: 9,
     label: "一級(jí)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 {
     // 不同級(jí)進(jìn)行處理
     return false;
    }
   },
   sort(draggingNode, dropNode, type, event) {
    // console.log('排序')
    // console.log("<><><>>><><<><><><><><><><>")
    // 拖拽之后的重新組合的數(shù)組
    // 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 任意級(jí)別拖拽功能代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: