vue结合drag-tree-table实现树形拖拽

vue结合drag-tree-table树形实现拖拽

在弄这个功能的时候走了很多弯路，所以特意来记录下。如有错误，欢迎指正。

vue-drag-tree-table 基于vue.js实现可拖拽排序的树形表格组件。支持拖拽排序、固定表头、拖拽改变行宽、checkbox多选、自定义单元格内容、动态控制某些行是否拖拽等功能。

首先在项目安装

npm i drag-tree-table --save-dev

第二步就是在main.js中引用。下面是我安装drag-tree-table的版本。

import dragTreeTable from "drag-tree-table";

<dragTreeTable
        :data=data
        :onDrag="onTreeDataChange"
        :fixed="true"
        
        :isdraggable="true" ref="dratree"></dragTreeTable>

实现拖拽的代码。lists是绑定的数据。

components: {
      dragTreeTable
    },
  data() {
    return {
      data: {
		open:false,
		namess:"",
		lists: [
			{
				"id":5,
				"name":"昆虫类",
				"open":true,
				"lists":[
				{
					"id":12,
					"parent_id":5,
					"open":true,
					"order":0,
					"name":"蚂蚁",
					"lists":[]
				}
				]
			},
		
		　],
		 columns: [
			{
			type: selection,
			field: name,
			width: 200,
			align: center,
			formatter: (item) => {
				return <a>+item.name+</a>
			}
			},
			{
				
				type: action,
				width: 350,
				align: center,
				actions: [
				{
					text: 查看角色,
					onclick: this.onDetail,
					formatter: (item) => {
					return <i>查看角色</i>
					}
				},
				{
					text: 编辑,
					onclick: this.onEdit,
					formatter: (item) => {
					return <i>编辑</i>
					}
				}
				]
			},
			]
		}
    };
  },
 
  }

核心代码。如果需要在前端灵活调用的话。

methods: {
    // list:更新后的数据源
    // from: 当前被拖拽的行
    // to: 目标拖拽行
    // where: 拖拽的类型，top（上面）、center（里面）、bottom（下面）
    onTreeDataChange(list, from, to, where) {
      console.log(from, to, where);
      this.data.lists = list;
    }

参考：