一. 背景

elementui没自带的拖拽排序功能，所以需要借助第三方插件sortablejs

二. 步骤

1. 安装
   npm install sortablejs --save
   

2. 引入
   import Sortable from ‘sortablejs’

3. template文件应用
   row-key填写唯一标识
   id="dragTable"是为了通过document找到该父容器
   

4. methods写方法，并根据需要在watch或mounted调用
   
   以上并没有更新数据库。要想更新数据库需要调用接口，如下

三. 代码

 <template>
 	<el-row>
 		<el-col :offset="0" :span="18">
            <el-table
              id="dragTable"
              ref="table"
              border
              :data="list"
              :height="$baseTableHeight(1)"
              style="width: 100%"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column label="#" type="index" />
              <el-table-column label="名称" prop="originalName" />
              <el-table-colum  label="图片">
              	<template slot-scope="{ row }">
              		<div @click="handlePriview(row.link)">
						<el-image alt="" :preview-src-list="srcList" :src="row.link" width="100%" />
					</div>
				</template>
			  </el-table-colum>
              <el-table-column label="操作" width="300">
                <template slot-scope="{ row }">
                  <el-button
                    icon="el-icon-view"
                    type="text"
                    @click="handlePreview(row)"
                  >
                    预览
                  </el-button>
                </template>
              </el-table-column>
              <!--数据为空时的处理，加一张图片提示-->
              <template #empty>
                <el-image
                  class="vab-data-empty"
                  :src="require('@/assets/empty_images/data_empty.png')"
                />
              </template>
            </el-table>
          </el-col>
   </el-row>
</template>
 
<script>
	 data() {
     	 return {
       	 	list: [],
       	 	archiveFileId: null,
        	srcList: [],
      	 }
	 },
 
	 methods: {
      	// 拖拽功能
      	rowDrop() {
        	this.$nextTick(() => {
          	this.$nextTick(() => {
          	// 要拖拽元素的父容器
         	 const tbody = document.querySelector('#dragTable tbody')
         	 const _this = this
         	 if (tbody) {
          	  Sortable.create(tbody, {
           	   // 指定父元素下可拖拽的子元素
            	handle: '.el-table__row',
              	animation: 150,
              	onEnd: ({ newIndex, oldIndex }) => {
              		// 获取唯一主键id
                	let archiveFileId = _this.list[oldIndex].id
                	this.archiveFileId = archiveFileId
                	_this.list.splice(
                  		newIndex,
                  		0,
                  		_this.list.splice(oldIndex, 1)[0]
                	)
                	var newArray = _this.list.slice(0)
                	_this.list = []
                	_this.$nextTick(function () {
                  	_this.list = newArray
                	})
                	// 调用后端接口（此处只传了一个主键id和排序sort字段）
                	updateSortById(this.archiveFileId, newIndex + 1).then((res) => {
                  		if (res.code == 200) {
                  		// 修改成功后，需要刷新页面
                    	this.fetchData()
                 	 }
                	})
              	},
            	})
          	}
        	})
      	},
      	// 预览功能
      	handlePriview(link){
        	this.srcList.push(link)
        }
}