1.

  1. import Sortable from 'sortablejs'
  1.     <el-table
  2.       ref="dragTable"
  3.       v-loading="listLoading"
  4.       :data="list"
  5.       row-key="id"
  6.       border
  7.       fit
  8.       highlight-current-row
  9.       style="width: 100%"
  10.     >
  11.       <el-table-column
  12.         type="index"
  13.         width="50"
  14.       />
  15.       <el-table-column label="单品内容" min-width="180px">
  16.         <template slot-scope="{row}">
  17.           <div style="display: flex;">
  18.             <img :src="row.cover" style="width: 100px;height: 50px;margin-right: 10px;">
  19.             <div style="display: flex;flex-direction: column;justify-content: space-between;">
  20.               <span>{{ row.title }}</span>
  21.               <span style="color: red;">￥{{ row.price }}</span>
  22.             </div>
  23.           </div>
  24.         </template>
  25.       </el-table-column>
  27.     </el-table>
  29. //  js
  30.     setSort() {
  31.       const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
  32.       this.sortable = Sortable.create(el, {
  33.         ghostClass: 'sortable-ghost',
  34.         setData: function(dataTransfer) {
  35.           console.log('dataTransfer', dataTransfer)
  36.           dataTransfer.setData('Text', '')
  37.         },
  38.         onEnd: evt => {
  39.           const targetRow = this.list.splice(evt.oldIndex, 1)[0] // 切割上一步数组
  40.           this.list.splice(evt.newIndex, 0, targetRow) // 下一步新数组后面添加上一步
  41.           const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
  42.           this.newList.splice(evt.newIndex, 0, tempIndex)
  43.         }
  44.       })
  45.     }
  47.   //  css
  49. .sortable-ghost{
  50.   opacity: .8;
  51.   color: #fff!important;
  52.   background: #42b983!important;
  53. }