el-tabs 支持拖拽

`el-tabs` 是 Element UI 提供的一个用于创建标签页组件，它本身并不直接支持原生的拖拽功能。然而，Element UI 的一些组件确实允许通过第三方库或自定义事件处理来实现拖拽功能，例如你可以通过集成 `vuedraggable` 这样的库来为 `el-tabs` 的标签添加拖动选项。

要在 `el-tabs` 中启用拖拽，你需要做以下几个步骤：

1. 首先，在项目中安装 `vuedraggable`：`npm install vuedraggable`

2. 然后，在 Vue 组件中引入并使用 `vuedraggable`，将 `el-tab-item` 包裹在一个可拖动的容器内：

<template>
  <div id="draggable-tabs">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.name" draggable>
        {{ item.content }}
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable,
  },
  data() {
    return {
      activeName: '1',
      tabs: [
        { name: 'Tab 1', content: 'Content 1' },
        { name: 'Tab 2', content: 'Content 2' },
        // 更多 tab...
      ]
    }
  },
  methods: {
    handleTabClick(tab) {
      // tab click handler
    },
    onDragEnd(e, component, container, to, from) {
      // 更新数据模型以反映拖拽后的顺序变化
      this.tabs = this.tabs.sort((a, b) => a.order - b.order);
    }
  }
}
</script>

在这个例子中，`vuedraggable` 的 `draggable` 属性开启拖拽，并在 `onDragEnd` 函数里更新了 `tabs` 数组的顺序。