draggable el-tabs

您可以将el-tabs的标签页设置为可拖拽的，具体方法如下：

1. 首先，您需要安装`vuedraggable`插件，可以使用以下命令进行安装：

npm install vuedraggable --save

2. 在您的Vue组件中引入`vuedraggable`插件：

import draggable from 'vuedraggable'

3. 在el-tabs组件中使用`draggable`标签包装el-tab-pane标签：

<el-tabs>
  <draggable v-model="tabs" :options="dragOptions">
    <el-tab-pane v-for="(tab, index) in tabs" :label="tab.title" :key="tab.id">
      {{tab.content}}
    </el-tab-pane>
  </draggable>
</el-tabs>

在上面的代码中，我们使用`v-model`将拖动后的标签页顺序绑定到`tabs`数组中，`dragOptions`是一个配置对象，您可以根据需要进行自定义。

4. 在Vue实例中定义`tabs`数组和`dragOptions`对象：

export default {
  data() {
    return {
      tabs: [
        { id: 1, title: 'Tab 1', content: 'This is the content of tab 1' },
        { id: 2, title: 'Tab 2', content: 'This is the content of tab 2' },
        { id: 3, title: 'Tab 3', content: 'This is the content of tab 3' },
        { id: 4, title: 'Tab 4', content: 'This is the content of tab 4' },
      ],
      dragOptions: {
        animation: 200,
        group: 'tabs',
        disabled: false,
        ghostClass: 'ghost',
      },
    }
  },
  components: {
    draggable,
  },
}

在上面的代码中，我们定义了一个包含四个标签页的`tabs`数组，`dragOptions`对象包含了一些配置选项，例如动画时间、组名、禁用等。

通过以上步骤，您就可以实现el-tabs的标签页可拖拽效果了。