el-table+sortable 实现表格行拖拽

完整代码

<template>
  <div>
    <div class='law-main'>
      <div class='main-header'>
        <el-button @click='addSlideSet()'><i class='el-icon-plus el-icon--left'></i>选取内容</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data='tableData'
        style='width: 100%'
        height='100%'
        row-key="id"
      >
        <el-table-column
          width='25'
        >
        </el-table-column>
        <el-table-column
          width='50'
        >
          <template slot-scope='scope'>
            <div class='circle' :class='top(scope)'>{{ scope.$index + 1 }}</div>
          </template>
        </el-table-column>

        <el-table-column
          prop='name'
          label='律所名称'
        >
        </el-table-column>
        <el-table-column
          prop='expert_count'
          label='专家数量'
        >
        </el-table-column>
        <el-table-column
          width='180'
          label='操作'>
          <template slot-scope='scope'>
            <el-button type='text' @click='editLawFirm(scope)' class='editor-text'>编辑</el-button>
            <span style='margin: 0 5px; width: 2px; height: 16px; background-color: #e4e4e4'></span>
            <el-popconfirm
              title='确定删除该律所吗？'
              @confirm='deleteLawFirm(row)'
            >
              <el-button slot='reference' type='text' class='editor-text'
              >删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
export default {
  name: 'SlideSet',
  components: {},
  data() {
    return {
      drag: false,
      tableData: [{
        date: '2016-05-02',
        name: '王小mao',
        address: '上海市普陀区金沙江路 1518 弄',
        id: '1'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        id: '2'
      }, {
        date: '2016-05-01',
        name: '王小die',
        address: '上海市普陀区金沙江路 1519 弄',
        id: '3'
      }, {
        date: '2016-05-03',
        name: '王小niu',
        address: '上海市普陀区金沙江路 1516 弄',
        id: '4'
      }]
    }
  },
  watch: {
    tableData(newVal) {
      if (this.getTotal > 0) {
        this.initnewSortable()
      }
    }
  },
  mounted() {
    this.initnewSortable()
  },
  methods: {
    top(scope) {
      switch (scope.$index + 1) {
        case 1:
          return 'circleColor1'
        case 2:
          return 'circleColor2'
        case 3:
          return 'circleColor3'
      }
    },
    addSlideSet() {
      console.log('openTransfer')
    },
    editLawFirm(scope) {
      console.log(scope)
    },
    Move(arr, a, b) {
      const arr_temp = [].concat(arr) // 创建一个新的临时数组，用以操作后不变更原数组
      arr_temp.splice(b, 0, arr_temp.splice(a, 1)[0]) // 在b位置插入从a位置截取的元素
      return arr_temp
    },
    initnewSortable() {
      const el = this.$refs.multipleTable.$el.querySelector('.el-table__body > tbody')
      const that = this
      new Sortable(el, {
        animation: 150,
        ghostClass: 'blue-background-class',
        onUpdate: function(event) {
          console.log(event.oldIndex, event.newIndex)
          const arr = that.tableData
          console.log('look;look')
          console.log(that.Move(arr, event.oldIndex, event.newIndex))
          // that.tableData = that.Move(arr, event.oldIndex, event.newIndex)
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.law-main {
  position: relative;
  width: 100%;
  height: calc(100vh - 189px);
  padding-bottom: 121px;

  .main-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    padding-bottom: 0;

  }
}
.circle{
  background-color: #9a9a9a;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius:50%;
  text-align: center;
  color: #FFFFFF;
}
.circleColor1{
  background-color: #4886FF;
}
.circleColor2{
  background-color: #4886FF;
  opacity: 60%;
}
.circleColor3{
  background-color: #4886FF;
  opacity: 60%;
}
// 拖拽
.dragClass {
  background: rgba($color: #41c21a, $alpha: 0.5) !important;
}
// 停靠
.ghostClass {
  background: rgba($color: #6cacf5, $alpha: 0.5) !important;
}
// 选择
.chosenClass:hover > td {
  background: rgba($color: #f56c6c, $alpha: 0.5) !important;
}
</style>

执行步骤

给table加上ref下标

ref="multipleTable"

加上row-key

row-key="id"

下载 npm install sortablejs --save

引入

import Sortable from 'sortablejs'

引入

mounted() {
  this.initnewSortable()
},

引入方法

Move(arr, a, b) {
  const arr_temp = [].concat(arr) // 创建一个新的临时数组，用以操作后不变更原数组
  arr_temp.splice(b, 0, arr_temp.splice(a, 1)[0]) // 在b位置插入从a位置截取的元素
  return arr_temp
},
initnewSortable() {
  const el = this.$refs.multipleTable.$el.querySelector('.el-table__body > tbody')
  const that = this
  new Sortable(el, {
    animation: 150,
    ghostClass: 'blue-background-class',
    onUpdate: function(event) {
      console.log(event.oldIndex, event.newIndex)
      const arr = that.tableData
      console.log('look;look')
      console.log(that.Move(arr, event.oldIndex, event.newIndex))
      //带参数发请求that.Move(arr, event.oldIndex, event.newIndex)
    }
  })
}

这时候已经拿到了最新的数组了,只需要发请求给后台,让后台把数组重排便可