带拖拽排序的el-table

思路：
使用Sortable.js是一款轻量级的拖放排序列表的js插件
npm install sortablejs --save

//在要使用的组件中导入
import Sortable from ‘sortablejs’

代码展示

<template>
  <div class="app-container">
    <h3>各房间尺寸</h3>
    <el-table
      id="table"
      row-key="id"
      :data="tableData"
      height="650"
    >
      <el-table-column
        fixed
        prop="a"
        label="房间名称"
        width="140"
      >
        <template slot-scope="scope">
          <span v-if="!scope.row.edit">{{ scope.row.a }}</span>
          <el-input v-if="scope.row.edit" v-model="scope.row.a" style="width:120px" size="mini" controls-position="right" />
        </template>
      </el-table-column>
      <el-table-column
        fixed
        prop="d"
        label="长（m）"
        width="140"
      >
        <template slot-scope="scope">
          <span v-if="!scope.row.edit">{{ scope.row.d }}</span>
          <el-input-number v-if="scope.row.edit" v-model="scope.row.d" style="width:120px" size="mini" controls-position="right" />
        </template>
      </el-table-column>

      <el-table-column
        prop="e"
        label="宽（m）"
        width="140"
      >
        <template slot-scope="scope">
          <span v-if="!scope.row.edit">{{ scope.row.e }}</span>
          <el-input-number v-if="scope.row.edit" v-model="scope.row.e" style="width:120px" size="mini" controls-position="right" />
        </template>
      </el-table-column>
      <el-table-column
        prop="f"
        label="高（mm）"
        width="140"
      >
        <template slot-scope="scope">
          <span v-if="!scope.row.edit">{{ scope.row.f }}</span>
          <el-input-number v-if="scope.row.edit" v-model="scope.row.f" style="width:120px" size="mini" controls-position="right" />
        </template>
      </el-table-column>
      <el-table-column
        prop="g"
        label="房间容积（m³）"
        width="140"
      />
      <el-table-column
        prop="h"
        label="房间容积（m³）"
        width="140"
      />
      <el-table-column
        prop="i"
        label="人员额定"
        width="140"
      >
        <template slot-scope="scope">
          <span v-if="!scope.row.edit">{{ scope.row.i }}</span>
          <el-input-number v-if="scope.row.edit" v-model.number="scope.row.i" style="width:120px" size="mini" controls-position="right" />
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        label="计算类型"
        width="140"
      />
      <el-table-column
        fixed="right"
        label="操作"
        header-align="center"
        align="center"
        width="220"
        min-width="40%"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.isdelButton"
            type="danger"
            size="small"
            plain
            @click="deletedata(scope.row,scope.$index)"
          >
            删除
          </el-button>
          <el-button
            v-if="scope.row.edit"
            type="success"
            size="small"
            plain
            @click="complete(scope.row,scope.$index)"
          >
            完成
          </el-button>
          <el-button
            v-if="!scope.row.edit"
            type="primary"
            size="small"
            plain
            @click="duplicate(scope.row,scope.$index)"
          >
            复制
          </el-button>
          <el-button
            v-if="!scope.row.edit"
            type="primary"
            size="small"
            plain
            @click="scope.row.edit=true"
          >
            编辑
          </el-button>
          <el-button
            v-if="scope.row.id===undefined"
            type="danger"
            size="small"
            plain
            @click="cancel(scope.row,scope.$index)"
          >
            取消
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-button @click="add">添加一个房间</el-button> -->
  </div>
</template>

<script>
import Sortable from 'sortablejs'
import { getRoomAll, updateRoom, deletedateRoom, copySaveRoom, dragandDropForm } from '@/api/basicDataMaintenance/ventilationDesign'
export default {
  name: 'Room',
  data() {
    return {
      tableData: []
    }
  },
  created() { //
    this.getRoomList()
  },
  mounted() {
    // 调用 table拖拽排序
    this.rowDrop()
  },
  methods: {
    dragandDropForm(aaa) {
      dragandDropForm(aaa).then(res => {
        if (!res.success) {
          this.$message({
            showClose: true,
            message: '错了哦，这是一条错误消息',
            type: 'error'
          })
        }
      })
    },
    // 行拖拽
    rowDrop() {
      const tbody = document.querySelector('#table tbody')
      const _this = this
      Sortable.create(tbody, {
      // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
        group: {
          name: 'words',
          pull: true,
          put: true
        },
        animation: 150, // ms, number 单位：ms，定义排序动画的时间
        onAdd: function(evt) { // 拖拽时候添加有新的节点的时候发生该事件
          console.log('onAdd.foo:', [evt.item, evt.from])
        },
        onUpdate: function(evt) { // 拖拽更新节点位置发生该事件
          console.log('onUpdate.foo:', [evt.item, evt.from])
        },
        onRemove: function(evt) { // 删除拖拽节点的时候促发该事件
          console.log('onRemove.foo:', [evt.item, evt.from])
        },
        onStart: function(evt) { // 开始拖拽出发该函数
          console.log('onStart.foo:', [evt.item, evt.from])
        },
        onSort: function(evt) { // 发生排序发生该事件
          console.log('onUpdate.foo:', [evt.item, evt.from])
        },
        onEnd({ newIndex, oldIndex }) { // 结束拖拽
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
          dragandDropForm(_this.tableData)
        }
      })
    },
    getRoomList() {
      getRoomAll().then(response => {
        this.tableData = response.data
      })
    },
    complete(row, index) {
      this.tableData[index].g = this.tableData[index].d * this.tableData[index].e * this.tableData[index].f
      this.tableData[index].h = (this.tableData[index].d - 0.2 * 2) * (this.tableData[index].e - 0.2 * 2) * (this.tableData[index].f - 0.5)
      if (this.tableData[index].id !== '101' &&
          this.tableData[index].id !== '102' &&
          this.tableData[index].id !== '103' &&
          this.tableData[index].id !== '104' &&
          this.tableData[index].id !== '105' &&
          this.tableData[index].id !== '106' &&
          this.tableData[index].id !== '107' &&
          this.tableData[index].id !== '108' &&
          this.tableData[index].id !== '109' &&
          this.tableData[index].id !== '110' &&
          this.tableData[index].id !== '111' &&
          this.tableData[index].id !== '112' &&
          this.tableData[index].id !== '113' &&
          this.tableData[index].id !== '114' &&
          this.tableData[index].id !== '115' &&
          this.tableData[index].id !== '116' &&
          this.tableData[index].id !== '117' &&
          this.tableData[index].id !== '118'
      ) {
        this.tableData[index].isdelButton = true
      }

      copySaveRoom(this.tableData[index]).then(res => {
        if (res.success === true) {
          this.$message({
            message: '修改成功！',
            type: 'success'
          })
          this.tableData[index].edit = false
          this.getRoomList()
        } else {
          this.$message.error('修改失败！')
        }
      })
    },
    add() {
      this.tableData.push({
        a: '',
        d: 0.0,
        e: 0.0,
        f: 0.0,
        g: 0.0,
        h: 0,
        i: 0,
        edit: false
      })
    },
    deletedata(row, index) {
      this.$confirm('此操作将永久删除是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'demo1',
        type: 'warning'
      }).then(() => {
        const result = this.tableData.splice(index, 1)
        deletedateRoom(result[0].id).then(res => {
          if (res.code === 20000) {
            this.$message({
              message: '删除成功！',
              type: 'success'
            })
          } else {
            this.$message.error('删除失败！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    duplicate(row, index) {
      const a = {
        a: row.a,
        d: row.d,
        e: row.e,
        edit: true,
        f: row.f,
        g: row.g,
        h: row.h,
        i: row.i,
        type: row.type,
        id: undefined
      }
      this.tableData.splice(index + 1, 0, a)
    },
    cancel(row, index) {
      this.tableData = this.tableData.filter((o) => {
        return o !== row
      })
    }
  }
}
</script>

    <style lang="scss">
    .el-dialog{
      border-radius: 15px;
      margin-bottom: 100px;
    }
    .el-dialog__header{
      border-radius: 15px 15px 0px 0px;
      border-bottom: 1px solid #e8eaec;
      background-color: #66B1FF;
    }
    .el-dialog__title {
        line-height: 24px;
        letter-spacing:18px;
        font-size: 20px;
        color: #fefeff;
    }
    .el-dialog__footer {
      border-top: 1px solid #e8eaec;
      margin: 0px auto;
    }
    </style>