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

原创

wx5909dcbadae4c 2024-08-25 14:21:35 博主文章分类：vue ©著作权

文章标签 vue.js 前端 javascript 拖拽数组 文章分类 Redis 数据库

©著作权归作者所有：来自51CTO博客作者wx5909dcbadae4c的原创作品，请联系作者获取转载授权，否则将追究法律责任

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;
      });
    },
  });
},

把原数据置空。