vue elementui tree 任意级别拖拽功能

我的是根据父级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="暂无数据">

     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)
	        }
        })
    }

 

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
### 回答1: Vue.js 是一个渐进式的 JavaScript 框架,它能够帮助开发者构建用户界面。而 ElementUI 是一个基于 Vue.js 的前端 UI 框架,它提供了很多实用的 UI 组件,其中包括树形控件。使用 Vue.js 和 ElementUI 开发树形结构的应用时,可以使用 ElementUI 提供的 el-tree 组件来实现。 ### 回答2: vue elementui是一个优秀的基于Vue.js框架的UI组件库,其中包含了很多实用的控件,其中包括tree树形控件。tree树形控件用于展示具有层关系的数据结构,其中每个节点可以有任意子节点。在Vue.js框架中,通过使用elementuitree控件,可以极大地简化tree树形控件的开发。 想要在vue elementui中使用tree树形控件,首先需要引入elementui中的tree组件,然后在Vue组件中声明tree控件,如下所示: ```html <template> <el-tree :data="treeData"></el-tree> </template> <script> import { ElTree } from 'element-ui'; export default { components: { ElTree, }, data() { return { treeData: [ { label: '节点1', children: [ { label: '子节点1.1', children: [ { label: '子节点1.1.1', }, ], }, { label: '子节点1.2', }, ], }, { label: '节点2', children: [ { label: '子节点2.1', }, { label: '子节点2.2', }, ], }, ], }; }, }; </script> ``` 在上述代码中,使用了elementui中的el-tree组件,并在组件中声明了一个名为treeData的数据,该数据用于存储要展示的树形结构数据。在treeData数据中,每个节点都是一个对象,其中包含label属性,用于展示节点文本,以及children属性,用于存储子节点数据。通过将treeData数据绑定到el-tree组件的data属性上,即可展示出完整的tree树形控件。 在实际开发中,还可以通过el-tree组件的props属性,对tree树形控件进行更多的自定义配置,例如设置单选或多选、显示图标等。另外,el-tree组件还提供了很多实用的事件,例如node-click、check-change等,可以方便地对用户操作进行响应。 综上所述,vue elementuitree树形控件既简单实用又功能强大,相信在实际开发中会得到广泛应用。 ### 回答3: Vue ElementUI Tree 树形控件是一款基于 Vue.js 框架和 ElementUI 组件库实现的树形控件。该控件采用了细粒度渲染的方式,可以在大数据量下高效渲染,并支持异步加载节点数据。 使用 Vue ElementUI Tree 树形控件,需要先导入相关的依赖包,如 ElementUI 组件库和 Vue.js 框架。在页面中创建 tree 组件,通过 props 属性设置相应的数据源和配置项,可以实现树形结构的展示和交互。 Vue ElementUI Tree 树形控件的主要特点包括以下几个方面: 1、支持异步加载节点数据 Vue ElementUI Tree 树形控件支持异步加载节点数据,可以实现懒加载和动态更新节点。通过配置异步加载函数和加载效果,可以实现异步加载节点数据的高度自定义。 2、支持多选和单选 用户可以配置 Vue ElementUI Tree 树形控件的选择模式,实现单选和多选功能。选择模式包括 radio(单选框)和 checkbox(复选框)两种。 3、支持节点拖拽和排序 Vue ElementUI Tree 树形控件支持节点拖拽和排序,可以通过配置相应的拖拽类型实现节点的复制、移动和排序等操作。 4、支持节点搜索和过滤 Vue ElementUI Tree 树形控件支持节点搜索和过滤功能,可以快速定位目标节点并进行相应的操作。 5、配置灵活性高 Vue ElementUI Tree 树形控件支持多种配置项,可以实现树形结构的高度自定义,包括数据源格式、节点图标、节点展开方式等。 总之,Vue ElementUI Tree 树形控件是一款功能强大、配置灵活的树形控件,在企业应用和数据展示中具有广泛的应用价值。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值