drag-tree-table实现element table树形表格拖动

如果您想要实现Element Table树形表格的拖动功能，可以考虑使用Vue.js框架并结合element-ui组件库，再使用一些自定义指令和事件来实现。

以下是一种实现方式：

1. 在Vue组件中引入element-ui组件库，并在模板中使用el-table组件，设置其tree-props属性为{children: 'children', hasChildren: 'hasChildren'}，以支持树形结构。

2. 使用自定义指令v-draggable，在表格行上绑定该指令，使得行可以被拖动。

3. 监听el-table组件的row-drop事件，在该事件中更新数据源，以实现拖拽行的排序。

下面是示例代码：

<template>
  <el-table
    :data="tableData"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    @row-drop="handleRowDrop"
  >
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <button v-if="scope.row.hasChildren" @click="toggleNode(scope.row)">
          {{ scope.row.expanded ? '收起' : '展开' }}
        </button>
      </template>
    </el-table-column>
    <el-table-column label="拖动" width="80">
      <template slot-scope="scope">
        <div v-draggable class="drag-handle">
          <i class="el-icon-s-grid"></i>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { directive } from 'vuedraggable'

export default {
  directives: {
    draggable: directive
  },
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 18,
          address: '北京市朝阳区',
          children: [
            {
              name: '李四',
              age: 22,
              address: '北京市海淀区',
              children: [],
              hasChildren: false
            }
          ],
          hasChildren: true
        },
        {
          name: '王五',
          age: 30,
          address: '上海市浦东区',
          children: [],
          hasChildren: false
        }
      ]
    }
  },
  methods: {
    toggleNode(node) {
      this.$refs.table.toggleRowExpansion(node)
    },
    handleRowDrop(event) {
      const { treeData, newIndex, oldIndex } = event
      // 更新数据源
      treeData.splice(newIndex, 0, treeData.splice(oldIndex, 1)[0])
    }
  }
}
</script>

<style>
.drag-handle {
  cursor: move;
  display: inline-block;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
}
</style>

在上面的代码中，我们首先引入了vuedraggable库中的directive指令，并将其作为自定义指令draggable注册到Vue实例中。

在模板中，我们将el-table组件的tree-props属性设置为指定的树形结构字段，以支持树形表格的展示。然后在拖动列中使用v-draggable指令，使得行可以被拖拽。

最后，我们监听了el-table组件的row-drop事件，在事件中更新数据源，以实现行的拖拽排序。