table表实现拖拽交换列表顺序

背景

当表格列表的数据涉及到排序或者优先级时，这个功能就很关键了，直接拖拽交换顺序比上下点击移动更友好。

效果图

关键的是引入npm install --save sortablejs

<template>
<div class="table"> 
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="sort" label="序号" width="180"> 
        <template slot-scope="scope">{{scope.$index + 1}}</template>
    </el-table-column>
    <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 {
  name: "TableSort",
  data() {
    return {
      drawer: '',
      tableData: []
    };
  }, created() {
    this.tableData = [
        {
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ] 
      this.$nextTick(()=>{
        this.drawer = document.querySelectorAll('.el-table__body-wrapper tbody')[0]
        this.rowInit()
      })
  },
  methods: {
    rowInit() {
        const tbody = this.drawer
        const _this = this
        this.sortable = Sortable.create(tbody, {
            onEnd({newIndex, oldIndex}) {
                const oldData = _this.tableData.splice(oldIndex, 1)[0]
                _this.tableData.splice(newIndex, 0, oldData)
                var newArray = _this.tableData.slice(0)
                _this.tableData = []
                _this.$nextTick(()=>{
                    _this.tableData = newArray
                })
            }
        })
    }
  }
};
</script>
<style scoped lang="scss">
.table {
    margin: 20px 40px;
    border: 1px solid #EBEEF5;
}
</style>