ElementUI

基于vue+sortable.js實作表格行拖拽

By:授客 QQ：1033553122

實踐環境

[email protected]

[email protected]

[email protected]

安裝sortable.js拖拽庫

npm install sortablejs
           

代碼示例

<template>
  <div class="demo-table-wrapper">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="位址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from "sortablejs";

export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀區金沙江路 1518 弄1"
        },
        {
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀區金沙江路 1517 弄2"
        },
        {
          date: "2016-05-01",
          name: "王小虎3",
          address: "上海市普陀區金沙江路 1519 弄3"
        },
        {
          date: "2016-05-03",
          name: "王小虎4",
          address: "上海市普陀區金沙江路 1516 弄4"
        }
      ]
    };
  },

  mounted() {
    this.dragRow();
  },
  methods: {
    // 行拖拽
    dragRow() {
      // 查找要拖拽元素的父容器
      const tbody = document.querySelector(
        ".demo-table-wrapper .el-table__body-wrapper tbody"
      );

      const _this = this;
      Sortable.create(tbody, {
        draggable: ".demo-table-wrapper .el-table__row", //  指定父容器下可被拖拽的子元素

        onEnd({ newIndex, oldIndex }) {
          /**
           * onEnd 拖拽結束後的事件處理函數
           * newIndex：目标位置對應行的索引
           * oldIndex：被拖拽行的索引
           * 
           * ====================（被拖拽記錄行1）
           * before
           * ====================(拖拽至目标位置對應記錄行)
           * after
           * ====================（被拖拽記錄行2）
           * 如果從上往下拖拽，即newIndex > oldIndex，那麼在目标位置對應記錄行上移(目标位置對應記錄行索引值減1)，在newIndex所指位置插入被拖拽行(被拖拽行索引設定為newIndex)，視覺效果就是在after位置(即目标位置對應行下方)插入被拖拽行
           * 如果從下往上拖拽，即newIndex < oldIndex，那麼在目标位置對應記錄行下移(目标位置對應記錄行索引值加1)，在newIndex所指位置插入被拖拽行(被拖拽行索引設定為newIndex)，視覺效果就是在上述before位置(即目标位置對應行上方)插入被拖拽行
           * */ 

          console.log(newIndex, oldIndex);
          if(newIndex > oldIndex){
              // 請求伺服器做資料更新處理，然後根據處理結果對前端頁面處理 
          } else {
              // 請求伺服器做資料更新處理 ，然後根據處理結果對前端頁面處理
          }           
        }
      });
    }
   
  }
};
</script>

<style scoped>
.demo-table-wrapper {
}
</style>
           

參考連接配接

http://www.itxst.com/sortablejs/neuinffi.html

作者：授客

QQ：1033553122

全國軟體測試QQ交流群：7156436

Git位址：https://gitee.com/ishouke

友情提示：限于時間倉促，文中可能存在錯誤，歡迎指正、評論！

作者五行缺錢，如果覺得文章對您有幫助，請掃描下邊的二維碼打賞作者，金額随意，您的支援将是我繼續創作的源動力，打賞後如有任何疑問，請聯系我!!!

           微信打賞                       

支付寶打賞                  全國軟體測試交流QQ群