按流程先上文檔

sortable.js中文文檔 - itxst.com

安裝依賴sortablejs

npm install sortablejs --save

具體實(shí)現(xiàn)代碼demo

<template>
  <div class="myWrap">
    <el-table
      :data="tableBody"
      border
      row-key="id"
      :header-cell-style="{
        height: '48px',
        background: '#FAFAFA',
        color: '#333333',
        fontWeight: 'bold',
        fontSize: '14px',
      }"
    >
      <!-- 勾選框列 -->
      <el-table-column type="selection" width="48" fixed></el-table-column>
      <!-- 序號(hào)列 -->
      <el-table-column label="序號(hào)" type="index" width="50" fixed>
      </el-table-column>
      <!-- 表頭列 -->
      <el-table-column
        v-for="(item, index) in tableHeader"
        :key="item.index"
        :prop="item.prop"
        :label="item.label"
      >
      </el-table-column>
    </el-table>
    <br />
    <h3>表頭數(shù)據(jù)</h3>
    <pre>{{ tableHeader }}</pre>
    <br />
    <h3>表體數(shù)據(jù)</h3>
    <pre>{{ tableBody }}</pre>
  </div>
</template>
<script>
// 引入sortablejs插件
import Sortable from "sortablejs";
export default {
  data() {
    return {
      // 表頭數(shù)據(jù)
      tableHeader: [
        {
          label: "姓名",
          prop: "name",
        },
        {
          label: "年齡",
          prop: "age",
        },
        {
          label: "家鄉(xiāng)",
          prop: "home",
        },
        {
          label: "愛好",
          prop: "hobby",
        },
      ],
      // 表體數(shù)據(jù)
      tableBody: [
        {
          id: "1",
          name: "孫悟空",
          age: 500,
          home: "花果山",
          hobby: "吃桃子",
        },
        {
          id: "2",
          name: "豬八戒",
          age: 88,
          home: "高老莊",
          hobby: "吃包子",
        },
        {
          id: "3",
          name: "沙和尚",
          age: 1000,
          home: "通天河",
          hobby: "游泳",
        },
        {
          id: "4",
          name: "唐僧",
          age: 99999,
          home: "東土大唐",
          hobby: "念經(jīng)",
        },
      ],
    };
  },
  mounted() {
    // 列的拖拽初始化
    this.columnDropInit();
    // 行的拖拽初始化
    this.rowDropInit();
  },
  methods: {
    //列拖拽
    columnDropInit() {
      // 獲取列容器
      const wrapperColumn = document.querySelector(
        ".el-table__header-wrapper tr"
      );
      // 給列容器指定對(duì)應(yīng)拖拽規(guī)則
      this.sortable = Sortable.create(wrapperColumn, {
        //draggable: ".allowDrag",//指定允許拖拽的類名
        animation: 500,
        delay: 0,
        onEnd: ({ newIndex, oldIndex }) => {
         const fixedCount = 2 //前面加2列的數(shù)
          let tempHableHeader = [...this.tableHeader]; // 先存一份臨時(shí)變量表頭數(shù)據(jù)
          let temp; // 臨時(shí)變量用于交換
          temp = tempHableHeader[oldIndex - fixedCount ]; // 注意這里-fixedCount 是因?yàn)槲以诒砀竦那懊婕恿藘闪校ü催x框列，和序號(hào)列），如果沒有這兩列，序號(hào)就是正常對(duì)應(yīng)的，就不用減fixedCount 
          tempHableHeader[oldIndex - fixedCount ] = tempHableHeader[newIndex - fixedCount ]; 
          tempHableHeader[newIndex - fixedCount ] = temp;
          //先把表頭數(shù)據(jù)清空，然后再下一輪中重新去賦值
          this.tableHeader = []; 
          this.$nextTick(() => {
            this.tableHeader = tempHableHeader;
          });
        },
      });
    },
    // 行拖拽
    rowDropInit() {
      // 獲取行容器
      const wrapperRow = document.querySelector(
        ".el-table__body-wrapper tbody"
      );
      const that = this;
      // 給行容器指定對(duì)應(yīng)拖拽規(guī)則
      Sortable.create(wrapperRow, {
        onEnd({ newIndex, oldIndex }) {
          // 首先刪除原來的那一項(xiàng)，并且保存一份原來的那一項(xiàng)，因?yàn)閟plice返回的是一個(gè)數(shù)組，數(shù)組中的第一項(xiàng)就是刪掉的那一項(xiàng)
          const currRow = that.tableBody.splice(oldIndex, 1)[0];
          // 然后把這一項(xiàng)加入到新位置上
          that.tableBody.splice(newIndex, 0, currRow);
        },
      });
    },
  },
};
</script>
<style lang='less' scoped>
.myWrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 25px;
  /deep/ .el-table {
    .el-table__header-wrapper {
      tr {
        th {
          // 設(shè)置拖動(dòng)樣式，好看一些
          cursor: move;
        }
      }
    }
  }
}
</style>