【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)
      }
   }
}
  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值