一、上移下移

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-bottom"
            :disabled="scope.$index === tableData.length - 1"
            @click="moveDown(scope.$index, scope.row)"
          >
          </el-button>
          <el-button
            size="mini"
            icon="el-icon-top"
            :disabled="scope.$index === 0"
            @click="moveUp(scope.$index, scope.row)"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pre style="text-align: left">
      {{ tableData }}
    </pre>
  </div>
</template>
<script>
// import Sortable from "sortablejs";
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 100 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 200 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 300 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 400 弄",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    // 上移
    moveUp(index, row) {
      console.log("上移", index, row);
      if (index > 0) {
        const upDate = this.tableData[index - 1];
        this.tableData.splice(index - 1, 1);
        this.tableData.splice(index, 0, upDate);
      } else {
        alert("已经是第一条，不可上移");
      }
    },
    // 下移
    moveDown(index, row) {
      console.log("下移", index, row);
      if (index + 1 === this.tableData.length) {
        alert("已经是最后一条，不可下移");
      } else {
        const downDate = this.tableData[index + 1];
        this.tableData.splice(index + 1, 1);
        this.tableData.splice(index, 0, downDate);
      }
    },
  },
};
</script>

二、拖拽排序 

安装vuedraggable

cnpm i -S vuedraggable

局部引用：

//导入draggable组件
import draggable from "vuedraggable";
export default {
  //注册draggable组件
  components: {
    draggable,
  }
}

使用：

<template>
  <div style="font-size: 20px">
    <!--使用draggable组件-->
    <p>选择缓存</p>
    <draggable :group="groupName" v-model="cacheSelected" @end="onEnd_selected"  
 chosenClass="chosen"  animation="300">
      <div
        class="item"
        v-for="(item, index) in cacheSelected"
        :key="index"
        style="
          cursor: pointer;
          line-height: 25px;
          margin: 5px 0;
          border: 1px solid gray;
        "
      >
        {{ item }}
      </div>
    </draggable>
    <div>------------------------------------------</div>
    <draggable :group="groupName" v-model="allCache" @end="onEnd_all">
      <div
        class="item"
        v-for="(item, index) in allCache"
        :key="index"
        style="
          cursor: pointer;
          line-height: 25px;
          margin: 5px 0;
          border: 1px solid gray;
        "
      >
        {{ item }}
      </div>
    </draggable>
  </div>
</template>
<script>
//导入draggable组件
import draggable from "vuedraggable";
export default {
  //注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      groupName: "groupName",
      //定义要被拖拽对象的数组
      cacheSelected: [],
      allCache: ["dat", "disk", "redis", "memcache", "mbtiles"],
    };
  },
  methods: {
    //拖拽结束事件
    onEnd_selected() {
      console.log("this.cacheSelected:", this.cacheSelected);
    },
    onEnd_all() {
      console.log("this.allCache:", this.allCache);
    },
  },
};
</script>
<style lang="scss" scoped>

  .chosen {
    border: solid 1px #3089dc !important;
  }


</style>

el-table中行拖拽排序：

参考：el-table拖拽之sortablejs_shimh_凉茶的博客-CSDN博客_sortablejs 安装el-table拖拽之sortablejs可实现行拖拽和列拖拽代码简单易懂无冗余https://blog.csdn.net/weixin_34403976/article/details/123676815【Vue 项目】使用 vuedraggable 实现拖拽效果时遇到的问题及解决方案总结（允许 el-table 行拖拽、部分元素不允许拖拽、拖拽避免影响文字复制和输入框输入文字）_只爭朝夕不負韶華的博客-CSDN博客_draggable el-table在最近的开发过程中，遇到了关于拖拽排序的功能需求。在这里向大家推荐使用 vuedraggable。https://blog.csdn.net/qq_45613931/article/details/124101105 

el-table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况

<template>
  <div>
    <el-table :data="tableData" row-key="id">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <pre style="text-align: left">
      {{ tableData }}
    </pre>
  </div>
</template>
<script>
import Sortable from "sortablejs";
export default {
  data() {
    return {
      tableData: [
        {
          id: "1",
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 100 弄",
        },
        {
          id: "2",
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 200 弄",
        },
        {
          id: "3",
          date: "2016-05-01",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 300 弄",
        },
        {
          id: "4",
          date: "2016-05-03",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 400 弄",
        },
      ],
    };
  },
  mounted() {
    this.rowDrop();
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
        },
      });
    },
  },
};
</script>

el-table行和列都可以拖拽排序：

<template>
  <div style="width: 800px">
    <el-table :data="tableData" border row-key="id" align="left">
      <el-table-column
        v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :label="item.label"
      >
      </el-table-column>
    </el-table>
    <pre style="text-align: left">
      {{ dropCol }}
    </pre>
    <hr />
    <pre style="text-align: left">
      {{ tableData }}
    </pre>
  </div>
</template>
<script>
import Sortable from "sortablejs";
export default {
  data() {
    return {
      col: [
        {
          label: "日期",
          prop: "date",
        },
        {
          label: "姓名",
          prop: "name",
        },
        {
          label: "地址",
          prop: "address",
        },
      ],
      dropCol: [
        {
          label: "日期",
          prop: "date",
        },
        {
          label: "姓名",
          prop: "name",
        },
        {
          label: "地址",
          prop: "address",
        },
      ],
      tableData: [
        {
          id: "1",
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 100 弄",
        },
        {
          id: "2",
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 200 弄",
        },
        {
          id: "3",
          date: "2016-05-01",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 300 弄",
        },
        {
          id: "4",
          date: "2016-05-03",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 400 弄",
        },
      ],
    };
  },
  mounted() {
    this.rowDrop();
    this.columnDrop();
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
        },
      });
    },
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const oldItem = this.dropCol[evt.oldIndex];
          this.dropCol.splice(evt.oldIndex, 1);
          this.dropCol.splice(evt.newIndex, 0, oldItem);
        },
      });
    },
  },
};
</script>