[vue] el-tabs Sortable 只能拖拽一次

import Sortable from 'sortablejs' // 拖拽插件

官网： https://sortablejs.com/

<el-tabs
  v-model="activeName"
  v-show="tabList && tabList.length"
>
  <el-tab-pane
    v-for="x in tabList"
    :key="x.name"
    :label="x.label"
    :name="x.name"
  >
  </el-tab-pane>
</el-tabs>

mounted() {
    this.$nextTick(() => {
      this.rowDrop(); // 行拖拽效果
    });
},

rowDrop() {
  //  //找到想要拖拽的那一列
  const el = document.querySelector('.el-tabs .el-tabs__nav');
  const that = this;
  this.sortable = new Sortable(el, {
    animation: 100,
    sort: true,
    onEnd({ newIndex, oldIndex }) { // oldIIndex拖放前的位置， newIndex拖放后的位置
      const currRow = that.tabList.splice(oldIndex - 1, 1)[0]; // 鼠标拖拽当前的el-tabs-pane
      that.tabList.splice(newIndex - 1, 0, currRow); // tabList 是存放所有el-tabs-pane的数组
      // 截止上面为止，数组已经进行了更换，但是会看到视图没有更新，所以就进行了数组清空重新赋值
      const newArray = that.tabList;
      that.tabList = [];
      that.$nextTick(() => {
        that.tabList = newArray;
      });
    },
  });
},

把原数据置空。

that.tabList = [];

还有，el-tabs上不能使用v-if
v-if="tabList && tabList.length"，拖拽函数rowDrop里设置了that.tabList = [];重新渲染后，附加的拖拽事件丢失，就可能出现“只可以拖拽一次”的情况
换成v-show即可。

参考：
vue——element ui表格行拖拽