项目中使用ant-design-vue的tab组件时，需要可以对tab的标签页进行调整顺序，结果查看文档，发现vue的组件是没有提供此功能，而react的组件提供了此功能，本着一切从简的想法，于是乎，找到了如下的解决方法：
因为项目中已经有用到
vue的Sortable组件，所以就结合这个组件来实现tab标签页的拖拽
<template><!-- 测试 ant tag 组件的拖拽 --><a-tabstype="card"size="small"v-model="activeTab"@tabClick="clickFunc"id="drage-tab"><a-tab-pane v-for="item in dataList" :key="item.value" :tab="item.name">{{ item.value }}</a-tab-pane></a-tabs></template><script>export default {name: 'TestTabDrag',data () {return {activeTab: 1,dataList: [{name: '标签一', value: 1 },{name: '标签二', value: 2 },{name: '标签三', value: 3 },{name: '标签四', value: 4 },{name: '标签五', value: 5 },{name: '标签六', value: 6 },{name: '标签七', value: 7 },{name: '标签八', value: 8 }]}},methods: {clickFunc () {},setDragFunc () {// 找到各标签页的父级元素let drageTab = document.getElementById('drage-tab').querySelector('.ant-tabs-nav').firstChild// 因为我在 main.js 中引入了 sortable, 将它绑定在 vue 上，所以这里可以使用 this.$sortable// 具体的参数请查看 sortable 文档this.$sortable.create(drageTab, {ghostClass: 'drage-placeholder-style',onEnd: this.dragTabEndFunc})},dragTabEndFunc (obj) {console.log('-0-0-0-0-0-0-0-0-0-0-0')console.log(obj)console.log(this.dataList)}},mounted () {this.$nextTick(this.setDragFunc)}}</script><style scoped></style>
