交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 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.kunjuke.com/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实现行拖拽排序的示例代码

    广而告之:
    热门推荐:
    微信小程序云函数使用mysql数据库过程详解

    前言 小程序云开发的功能是越来越强大了,现在小程序云开发可以直接借助云函数来链接mysql数据,操作mysql数据库了,今天就来给大家讲一讲如何使用小程序云开发的云函数来操作mysql数据库。 首先要明确一点,就是小程序云开发的云函数是基于node.js的,所以我们使用node.js的my···

    仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]

    仿3721首页模块拖曳移动效果[拖曳层移动层]呵,做了一些细致的处理 html, body { width:100%; height:100%; padding:0px; margin:0px; } body { text-align:center; font-size:14px; } .cell_left, .cell_right { width:202px; } .cell···

    javascript定义变量时带var与不带var的区别分析

    本文实例分析了javascript定义变量时带var与不带var的区别。分享给大家供大家参考。具体分析如下: 直接看实例里说明: 复制代码 代码如下:<script language="javascript" type="text/javascript"> var abc=89;//带var,表示全局变量 function test(){  var abc=80;···

    推荐实用的关键词拓展工具弥补网站排名少的缺憾

    SEO优化师将工作核心放在高质量的内容建设,为网站创建更多的信息内容,但是网站关键词排名仍然是少数。有哪些方法或者工作可以拓展关键词呢?接下来,织梦58小编将为您介绍关键词扩展工具和方法,让我们来看看!  一、比较好用的关键词扩展工具:  1、百···

    织梦官方php服务器环境DedeAMPZ安装教程

    DedeAMPZ 是直接整合PHP + Apache + MySql 的服务器环境管理软件,操作十分傻瓜化,适合初中级水平的站长使用。 主要具有如下特点: 1、支持php4、php5、MySql4、MySql5、Apache2.2、Zend Optimizer-3.3.0;(完整版) 2、安装使用十分简···

    vue.js的安装方法

    一、简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动···

    基于Vue实现页面切换左右滑动效果

    基于Vue的页面切换左右滑动效果,具体内容如下 HTML文本页面: <template> <div id="app> <transition :name="direction" mode="out-in"> <!--动态获得transition 的name值--> <router-view class="app-view" wechat-title></router-···

    oracle 集合

    EXISTS 该函数返回 Collection.EXISTS(index) COUNT 该函数集合 Collection.COUNT DELETE 该过程从嵌套表中删除一个或多个或合部元素 Table_name.DELETE 删除所有元素 Table_name.delete(index)删除指定索引的记录 Table_name.delete(start_index,end_index)删除区间内元···

    多表关联同时更新多条不同的记录方法分享

    以下为测试例子。 1.首先创建两张临时表并录入测试数据: 复制代码 代码如下: create table #temptest1 ( id int, name1 varchar(50), age int ) create table #temptest2 ( id int, name1 varchar(50), age int ) 查询出此时的表数据为: #temptest1   &nbs···

    网站优化关键词排名下降,如何诊断SEO问题使其恢复排名?

    【关键词排名】俗话说:“没遇过网站排名下降或者被K的问题,不是一个合格的SEO”,因为我们站长在优化的过程中,难免会遇到网站没有任何征兆,关键词排名莫名下降,甚至导致整个网站被K,当我们遇到这样的问题,应该如何去诊断网站可能出现的优化问题,从而尽快恢复网站排名呢···