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

发布时间:2021-05-26 14:19:05编辑:admin阅读(129)

    一、概述

    Sortable.js

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

     

    先来看一下效果图:

    1.gif

     

    二、安装插件

    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


关键字