element ui el-table sorttable实现表格拖拽排序（vuedraggable）

npm install sortablejs --save

如果已经安装了 vuedraggable ，则可以不用安装 sortablejs

npm install vuedraggable

<template><div style="width:800px"class="draggable">// 这里的id需要是tableData数组中存在的，可以换成任意唯一值就行<el-table :data="tableData" row-key="id" border align="left"><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'exportdefault{data(){return{
      tableData:[{
          id:'1',
          date:'2016-05-02',
          name:'王小虎AAA',
          address:'沈阳市普陀区金沙江路2000-1518弄'},{
          id:'2',
          date:'2016-05-04',
          name:'王小虎BBB',
          address:'北京市普陀区金沙江路2020-1618弄'},{
          id:'3',
          date:'2016-05-01',
          name:'王小虎CCC',
          address:'成都市普陀区金沙江路2040-1718弄'},{
          id:'4',
          date:'2016-05-03',
          name:'王小虎DDD',
          address:'天津市普陀区金沙江路2030-1818弄'}]}},mounted(){this.rowDrop()},
  methods:{//行拖拽rowDrop(){const tbody = document.querySelector(".draggable .el-table__body-wrapper tbody");
      console.log(tbody,'tbody')const _this =this
      Sortable.create(tbody,{
        animation:150,
        draggable:".draggable .el-table__row",onEnd({ newIndex, oldIndex }){const currRow = _this.tableData.splice(oldIndex,1)[0]const aa = _this.tableData.splice(newIndex,0, currRow)
          console.log(aa)}})},}}</script><style scoped></style>