Vue进阶（幺零五）：elementUI 实现表格行列拖拽_vuedraggable+elementui table

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required.Supports Meteor, AngularJS, React, Polymer, Vue, Ember, Knockout and any CSS library, e.g. Bootstrap.

首先需要安装Sortable.js

npm install sortablejs --save

然后引用

import Sortable from ‘sortablejs’

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

二、示例代码

<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, {
 group : {
 name : "words",
 pull : true,
 put : true
 },
 animation : 150, //动画参数
 onAdd : function(evt) {//拖拽时候添加有新的节点的时候发生该事件
 
 },
 onUpdate : function(evt) {//拖拽更新节点位置发生该事件
 console.log('onUpdate.foo:', [evt.item, evt.from]);
 },
 onRemove : function(evt) {//删除拖拽节点的时候促发该事件
 console.log('onRemove.foo:', [evt.item, evt.from]);
 },
 onStart : function(evt) {//开始拖拽出发该函数
 console.log('onStart.foo:', [evt.item, evt.from]);
 },
 onSort : function(evt) {//发生排序发生该事件

 console.log('onUpdate.foo:', [evt.item, evt.from]);


### React

*   介绍一下react

*   React单项数据流

*   react生命周期函数和react组件的生命周期

*   react和Vue的原理，区别，亮点，作用

*   reactJs的组件交流

*   有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

*   项目里用到了react，为什么要选择react，react有哪些好处

*   怎么获取真正的dom

*   选择react的原因

*   react的生命周期函数

*   setState之后的流程

*   react高阶组件知道吗？

*   React的jsx，函数式编程

*   react的组件是通过什么去判断是否刷新的

*   如何配置React-Router

*   路由的动态加载模块

*   Redux中间件是什么东西，接受几个参数

*   redux请求中间件如何处理并发

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/9749ea39072fc4b7b27af6f3a4db5ab1.png)