element表格拖放排序

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

//在组件中导入
import Sortable from 'sortablejs'
 

<!--  弹框详情  -->
<el-dialog
  :title="title"
  :visible.sync="showDialog"
  :modal-append-to-body="false"
  append-to-body
  custom-class="category-dialog"
  class="diaForm"
  @opened="addOpen()"
>
<el-table
  id="table"
  border
  ref="listTable"
  :data="adContentData"
  row-key="id"
  class="mt20">
  <el-table-column align="center" type="index" width="150">
    <template slot="header" slot-scope="scope">
      <div>显示顺序</div>
      <div>（拖动调整顺序）</div>
    </template>
  </el-table-column>
  <el-table-column align="center" prop="name" label="名字"></el-table-column>
  <el-table-column label="操作" width="100" align="center">
    <template slot-scope="scope">
       <span class="pointer mr10" @click="scope.row.editType=true">编辑</span>                     <span class="pointer" @click="delRow(scope.row)">删除</span>
    </template>
  </el-table-column>
</el-table>
</el-dialog>

import Sortable from 'sortablejs'

adContentData: [],     // 数据列表
sortable: null,        // 拖拽对象

 

addOpen() {
  let tout=setTimeout(()=>{
    this.rowDrop();
  },500)
},
// 行拖拽,排序方法
rowDrop() {
  const el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
  this.sortable = Sortable.create(el, {
    ghostClass: 'sortable-ghost',
    setData: function(dataTransfer) {
      console.log('dataTransfer', dataTransfer)
      dataTransfer.setData('Text', '')
    },
    onEnd: evt => {
      console.log('evt', evt)
      const targetRow = this.adContentData.splice(evt.oldIndex, 1)[0]
      this.adContentData.splice(evt.newIndex, 0, targetRow)
    }
  })
},