ElementUI 实现Table组件实现拖拽效果

发布时间：2021-05-26 14:19:05编辑：admin阅读（4354）

一、概述

Sortable.js

Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。

 

先来看一下效果图：



 

二、安装插件

npm i -S vuedraggable

vuedraggable依赖 Sortable.js，所以下载了vuedraggable，我们便可以直接引入Sortable使用Sortable的特性。

vuedraggable是Sortable一种加强，实现组件化的思想，可以结合Vue，使用起来更方便

 

三、使用

需要注意的是element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。

test.vue

<template>
  <div style="width:800px">

    <el-table :data="tableData"
              border
              row-key="id"
              align="left">
      <el-table-column v-for="(item, index) in col"
                       :key="`col_${index}`"
                       :prop="dropCol[index].prop"
                       :label="item.label">
      </el-table-column>
    </el-table>
    <!--    <pre style="text-align: left">-->
    <!--      {{dropCol}}-->
    <!--    </pre>-->
    <!--    <hr>-->
    <!--    <pre style="text-align: left">-->
    <!--      {{tableData}}-->
    <!--    </pre>-->
  </div>
</template>
<script>
  import Sortable from 'sortablejs'
  export default {
    data() {
      return {
        col: [
          {
            label: '日期',
            prop: 'date'
          },
          {
            label: '姓名',
            prop: 'name'
          },
          {
            label: '地址',
            prop: 'address'
          }
        ],
        dropCol: [
          {
            label: '日期',
            prop: 'date'
          },
          {
            label: '姓名',
            prop: 'name'
          },
          {
            label: '地址',
            prop: 'address'
          }
        ],
        tableData: [
          {
            id: '1',
            date: '2016-05-02',
            name: '王小虎1',
            address: '上海市普陀区金沙江路 100 弄'
          },
          {
            id: '2',
            date: '2016-05-04',
            name: '王小虎2',
            address: '上海市普陀区金沙江路 200 弄'
          },
          {
            id: '3',
            date: '2016-05-01',
            name: '王小虎3',
            address: '上海市普陀区金沙江路 300 弄'
          },
          {
            id: '4',
            date: '2016-05-03',
            name: '王小虎4',
            address: '上海市普陀区金沙江路 400 弄'
          }
        ]
      }
    },
    mounted() {
      this.rowDrop()
      this.columnDrop()
    },
    methods: {
      //行拖拽
      rowDrop() {
        const tbody = document.querySelector('.el-table__body-wrapper tbody')
        const _this = this
        Sortable.create(tbody, {
          onEnd({ newIndex, oldIndex }) {
            console.log("拖动了行","当前序号: "+newIndex)
            const currRow = _this.tableData.splice(oldIndex, 1)[0]
            _this.tableData.splice(newIndex, 0, currRow)
          }
        })
      },
      //列拖拽
      columnDrop() {
        const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
        this.sortable = Sortable.create(wrapperTr, {
          animation: 180,
          delay: 0,
          onEnd: evt => {
            console.log("拖动了列")
            const oldItem = this.dropCol[evt.oldIndex]
            this.dropCol.splice(evt.oldIndex, 1)
            this.dropCol.splice(evt.newIndex, 0, oldItem)
          }
        })
      }
    }
  }
</script>




 

参数说明：

以rowDrop，行拖拽函数为例：

 

tbody 代表我们要侦听拖拽响应的dom对象

setData 回调HTML5 DragEvent的dataTransfer`对象，来设置显示的数据

onEnd 结束拖拽后的回调函数，newIndex，oldIndex分别表示新索引和老索引。

完整属性列表

 

 

本文参考文章：

https://www.cnblogs.com/jin-zhe/p/10181852.html

https://blog.csdn.net/qq_26440803/article/details/83663511

关键字：