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


    一、概述

    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="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>
    View Code

    参数说明:

    以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

  • 相关阅读:
    模拟一个弹出层
    mysql去重
    java 使用map返回多个对象组装
    java替换包含html标签
    java 给指定时间加上天数or给当前日期加天数
    js下载文件 阿星小栈
    Redis中Set集合命令 阿星小栈
    Mysql查询不为null值和字段为null 阿星小栈
    php求今天、昨天、明天时间戳的方法 阿星小栈
    PHP百分数转小数,php 小数转换百分数函数 阿星小栈
  • 原文地址:https://www.cnblogs.com/xiao987334176/p/14777652.html
Copyright © 2020-2023  润新知