el-table拖动排序

.<template>
  <div>
    <div style="margin-bottom: 5px" v-show="tableData.length">
      <el-button size="mini" type="danger" @click="handleAllDelete">删除选中</el-button>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      height="220"
      size="mini"
      :border="false"
      row-key="id"
      empty-text="暂无素材!"
      @selection-change="handleSelectionChange"
      >
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="文件名"  show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="类型" >
        <template slot-scope="scope">{{ returnType(scope.row.type) }}</template>
      </el-table-column>
      <el-table-column prop="createBy" label="创建者" >
        <template slot-scope="scope">
          {{scope.row.createBy}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 删除提示弹窗 -->
    <el-dialog
      title="温馨提示"
      :visible.sync="deleteVisible"
      width="20%"
      append-to-body
      >
      <span>是否删除素材{{filename}}？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleFormat">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
export default {
  name: 'MaterialTable',
  props: {
    tableData: {
      type: Array,
      default () {
        return []
      }
    },
    control_type: {
      type: [Number, String]
    },
  },
  data () {
    return {
      deleteVisible: false,
      selectData: [],
      filename: '',
    }
  },
  watch: {
    tableData: {
      handler: function (newValue) {
        console.log('MaterialTable：', newValue)
      },
      deep: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initSortable()
    })
  },
  methods: {
    // 初始化拖拽
    initSortable () {
      const el = this.$refs.multipleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'chosen',
        animation: 150,
        onEnd: evt => {
          const oldIndex = evt.oldIndex
          const newIndex = evt.newIndex
          const temp = this.tableData[oldIndex]
          if (oldIndex < newIndex) { // 向下移动调整顺序
            for (let i = oldIndex; i < newIndex; i++) {
              this.tableData[i] = this.tableData[i + 1]
            }
          } else if (oldIndex > newIndex) { // 向上移动时调整顺序
            for (let i = oldIndex; i > newIndex; i--) {
              this.tableData[i] = this.tableData[i - 1]
            }
          }
          this.tableData[newIndex] = temp
        },
      })
    },
    returnType (type) {
      return type === 2 ? '图片' : '视频'
    },
    // 选中的素材
    handleSelectionChange (selection) {
      this.selectData = selection
    },
    handleDelete (index, row) {
      // 删除
      this.deleteVisible = true
      this.filename = row.name
      this.selectData = [row]
    },
    // 删除选中
    handleAllDelete () {
      if (!this.selectData.length) {
        this.$message.error('暂未选中素材!')
        return false
      }
      this.deleteVisible = true
    },
    handleFormat () {
      const tableData = JSON.parse(JSON.stringify(this.tableData))
      const newTableData = []
      tableData.forEach(value => {
        this.selectData.forEach(item => {
          if (value.id !== item.id) {
            newTableData.push(value)
          }
        })
      })
      this.$emit('delete:table', newTableData)
      this.deleteVisible = false
      this.filename = ''
      this.selectRowId = ''
      console.log('tableData：', tableData, newTableData)
    }
  }
}
</script>

<style scoped lang="scss">
    /deep/ .el-table__row {
      cursor: move!important;
    }
   /deep/.chosen {
       border: solid 1px #3089dc !important;
       cursor: move!important;
   }
</style>