【Vue2 + ElementUI】实现表格拖拽功能及行大图预览

一. 背景

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>
// 引入排序接口
  import {
    getList,
    updateSort,
  } from '@/api/archive/archiveFile'
// 引入树组件
  import ArchiveFileCategoryTreeVue from '@/component/archiveFileCategoryTree.vue'
export default {
	 data() {
     	 return {
       	 	list: [],
       	 	archiveFileId: null,
        	srcList: [],
      	 }
	 },
 
	 methods: {
	 // 初始化列表数据
	 fetchData() {
          getList(1, 999, this.query).then((res) => {
            this.list = res.data.records
          })
      },
      
	 // 点击树，切换节点
	  nodeClick(row) {
        // 调用拖拽方法，如果id == '0'即为【全部】不可拖拽，否则可拖拽
        this.handleDropPicture(row.id)
        this.handleClick()
      },
      
      // 行拖拽
      handleDropPicture(id) {
        if (id != '0') {
          this.$nextTick(() => {
            // 要拖拽元素的父容器
            this.tbody = document.querySelector('#dragTable tbody')
            const _this = this
            if (_this.tbody) {
              _this.sortable = Sortable.create(_this.tbody, {
                // 指定父元素下可拖拽的子元素
                handle: '.el-table__row',
                animation: 150,
                onEnd: ({ newIndex, oldIndex }) => {
                  const currRow = _this.list.splice(oldIndex, 1)[0]
                  _this.list.splice(newIndex, 0, currRow)
                  _this.list.forEach((e, index) => {
                    e.sort = index
                  })
                  //减少数据传输量
                  let newArray = _this.list.map((e) => {
                    return {
                      id: e.id,
                      sort: e.sort,
                    }
                  })
                  // 调用接口
                  updateSort(newArray).then((res) => {
                    this.$baseMessage(
                      res.msg,
                      res.success ? 'success' : 'error'
                    )
                    // 刷新页面
                    this.fetchData()
                  })
                },
              })
            }
          })
        } else {
          //点击全部时关掉排序
          this.sortable.destroy()
        }
      },
      
      // 预览功能
      handlePriview(link){
        this.srcList.push(link)
      }
   }
}