vue2表格树形结构拖拽

Vue2表格树形结构拖拽可以通过使用第三方库vue-draggable来实现。以下是一个基本的示例：

安装依赖：

npm install vue-draggable --save

在Vue组件中引入并使用：

<template>
  <draggable v-model="treeData" :options="{group:'tree'}" class="tree">
    <template v-slot="{element}">
      <div :class="{ 'tree-node': true, 'tree-node--leaf': !element.children }">
        {{ element.label }}
      </div>
    </template>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: 'Node 1',
          children: [
            {
              id: 2,
              label: 'Node 1.1'
            },
            {
              id: 3,
              label: 'Node 1.2'
            }
          ]
        },
        {
          id: 4,
          label: 'Node 2',
          children: [
            {
              id: 5,
              label: 'Node 2.1'
            },
            {
              id: 6,
              label: 'Node 2.2'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style>
.tree {
  border: 1px solid #ccc;
  padding: 10px;
}

.tree-node {
  padding: 5px;
  cursor: move;
}

.tree-node--leaf {
  font-weight: bold;
}
</style>

在上面的示例中，我们使用vue-draggable组件来包装树形结构，并设置group属性为tree。这将使拖放操作仅在树中生效。我们还使用slot来定义每个节点的呈现方式，并在样式中定义了基本的外观。