VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • sortable+element 实现表格行拖拽的方法示例

    背景

    1、vue项目中的表格需要实现行拖拽功能

    2、表格使用element组件库中el-table

    方案介绍

    Sortable.js

    介绍:Sortable.js是一款轻量级的拖放排序列表的js插件

    引用自官方文档:No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.

    参考地址: https://github.com/SortableJS/Sortable

    vuedraggable
    介绍:基于Sortable.js的vue组件,用以实现拖拽功能

    引用自官方文档:Vue drag-and-drop component based on Sortable.js

    参考地址: https://github.com/SortableJS/Vue.Draggable

    遇到的问题
    在使用vuedraggable的过程中,发现必须用<draggable></draggable>包裹拖动项的父级元素,但是element组件库对table进行封装,无法直接包裹拖动项(即tr)的父级元素

    如果你的项目中,表格未使用组件库,实现可以参考 https://www.jb51.net/article/162648.htm

    解决方案

    使用 sortable.js

    步骤一: 安装

    npm install vuedraggable
    

    步骤二:引入

    import Sortable from 'sortablejs';
    
    @Component({
     components: {
      Sortable
     }
    })
    
    

    步骤三: el-table 添加row-key属性

    <el-table
     ref="filterTable"
     row-key="ip" 
     @filter-change="handlerFilterChange" 
     class="cl-table" 
     :data="resourceList" 
     v-loading="resourceListLoading" 
     stripe style="width:100%;">
     <el-table-column
       prop="name"
      label="主机名" 
      :min-width="150" 
      show-overflow-tooltip>
     </el-table-column>
     </el-table>
    

    步骤四 : 将拖拽元素设置为要拖动项的父级元素

    mounted() {
       // 表格中需要实现行拖动,所以选中tr的父级元素
      const table = document.querySelector('.el-table__body-wrapper tbody')
      const self = this
      Sortable.create(table, {
       onEnd({ newIndex, oldIndex }) {
        console.log(newIndex, oldIndex)
        const targetRow = self.resourceList.splice(oldIndex, 1)[0]
        self.resourceList.splice(newIndex, 0, targetRow)
       }
      })
     }
    
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • Elementui表格组件+sortablejs实现行拖拽排序的示例代码

    广而告之:
    热门推荐:
    Html5新标签解释及用法

    它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。 HTML 5 提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似 <div> 和 &···

    Dreamweaver中的AP元素怎么修改宽度高度和颜色?

    Dreamweaver中想要修改AP元素的颜色,该怎么修改呢?下面我们就来看看详细的教程。 软件名称: Adobe Dreamweaver CS5 官方简体中文版(官方原版(附完美注册器支持联网在线更新) 软件大小: 更新时间: 2012-01-11 1、首先我们找到桌面的网页设计软件,双击打开应用程序 ···

    Mac下php 5升级到php 7的步骤详解

    前言 在MAC OS X 10.11中php的版本是5.5的,近来一年多里,看到了很多关于php7介绍,以为php7增加了很多新特性,也删除了原来很多的老特性,所以一直以来并没想去尝试使用php7,但今天去php官网上认真的看了一下php7的新特性,发现其实php7最大的提升在于性能,虽然在语法上增加···

    从wamp到xampp的升级之路

    准备学习php框架Laravel,但PHP版本要求5.4+,目前用的wamp默认版本5.3,所以准备使用xampp,以下为记录 卸载wamp,略过 > ps:注意卸载wamp会删除PHP目前下的文件,因为PHP的扩展redis,memcache也会删除,记得备份,也可重下版本,还有MySQL数据库也记得备份 https://www.a···

    div嵌套html不用iframe

    最近在做作业中需要在不用iframe的情况下嵌套页面,所以只好在div中嵌套,用的是jquery方法。 复制代码代码如下: <script type="text/javascript"> $(document).ready(function() { $("#button").click(function() { $("#content").load("index.jsp"); }); }); &l···

    CSS圆角边框制作指南与实例

    使用 CSS 制作圆角边框可能是网页前端设计师们最头痛的问题之一. 圆角边框看似简单, 但实现起来却很不简单, 可能需要复杂的页面结构或大量的边角图片, 方法很多, 但无论哪一种都是难以维护的. CSS 很直观, 但显然不够灵活, 导致页面设计中出现大量冗余代码. 不能使用变量和循环···

    详解Vue webapp项目通过HBulider打包原生APP

    Vue webapp项目通过HBulider打包原生APP 1、webapp项目已经通过vue-cli搭建的脚手架写好了,然后通过webpack打包成一个部署文件list,如下: 2、打开HBulider,打开目录,选择这个list,项目名称自己更改。(或者直接新建一个app项目,然后把里边的unpackage和manifest这两个···

    php截取字符串函数分享

    经常看到有新手问PHP有没有类似asp的left函数或right函数,实现截取某字符串左边或右边开始N个字符的函数。答案当然是有的。PHP中的substr函数就可以做的到,只不过PHP把二个函数合二为一了,这里再给大家分享一个更加优秀的截取字符串的函数。 复制代码 代码如下: /**  &···

    php使用多个进程同时控制文件读写示例

    复制代码 代码如下:<?php/** * 写入数据 * @param  [string] $path [文件路径] * @param  [string] $mode [文件打开模式] * @param  [string] $data [数据] * @return [bool]        */f···

    php实时倒计时功能实现方法详解

    本文实例讲述了php实时倒计时功能实现方法。分享给大家供大家参考,具体如下: 这几天公司要做一个限时购物的功能.这就要做到倒计时,要有实时的倒计时. 要求: 1) 要有小时分钟秒的实时倒计时的显示 2)用户端修改日期时间不会影响到倒计时的正常显示(也就是以服务器时间为准) 其···