您现在的位置是:首页 > 正文

element-ui的el-table,使用sortablejs改造成可拖拽排序

2024-02-01 03:56:31阅读 2

element-ui的el-table,使用sortablejs改造成可拖拽排序

改造成一个指令

import Sortable from 'sortablejs'

export default {
  bind(el, binding, vNode) {
    const _this = vNode.context
    const tbody = el.querySelector('.el-table__body-wrapper tbody')
    el._sortable = Sortable.create(tbody, {
      handle: '.el-table__row',
      onEnd: (data) => {
        console.log(data)
        const userList = JSON.parse(JSON.stringify(_this[binding.expression]))
        const deleteList = userList.splice(data.oldIndex, 1)
        userList.splice(data.newIndex, 0, deleteList[0])
        _this[binding.expression] = userList
        _this.$forceUpdate()
        _this.$nextTick(() => {
          vNode.componentInstance.doLayout()
        })
      }
    })
  },
  unbind(el) {
    el._sortable && el._sortable.destroy()
  }
}

注册指令

import SortableTable from './directive/sortable-table'
Vue.directive('SortableTable', SortableTable)

使用指令

<!-- row-key必须使用 -->
<el-table v-sortable-table="userList" row-key="userId" :data="userList"> 
     <el-table-column 
            key="userName"
            label="用户名称" 
            prop="userName"  />
</el-table>

网站文章

  • 操作系统存储器管理实验报告_别只做CRUD程序员,收下这篇操作系统干货(一)!...

    操作系统存储器管理实验报告_别只做CRUD程序员,收下这篇操作系统干货(一)!...

    一、操作系统概念1.计算机系统组成任何一个计算机系统都是由两部分组成:计算机硬件和计算机软件。- 计算机硬件通常是由中央处理机(运算器和控制器)、存储器、输入设备和输出设备等部件组成。- 计算机软件包括系统软件和应用软件。系统软件如操作系统、多种语言处理程序( 汇编和编译程序等 )、连接装配程序、系统实用程序、多种工具软件等; 应用软件为多种应用目的而编制的程序。2.操作系统的非形...

    2024-02-01 03:56:24
  • 软件测试-测试的时候获取验证码的方式

    软件测试-测试的时候获取验证码的方式

    问开发他们创建的表在哪里,找到那个验证码的表,打开,就可以看到测试的时候用的电话号码返回的验证码。在测试服打开f12,再点击获取验证码,通过network找到相对应的url,找到验证码。我的学习之路任重道远,咱们下期见~~~

    2024-02-01 03:55:50
  • Java基础(方法重写——override)

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~开发工具与关键技术:IDEA;...

    2024-02-01 03:55:38
  • 每日一题——v-if和v-show的理解

    每日一题——v-if和v-show的理解

    2024-02-01 03:55:09
  • winform前后端框架_Vue + .NetCore前后端分离的快速发开框架

    框架核心快速开发(基础功能全部由代码生成器生成)支持前端、后台自定义业务代码扩展,后台提供了大量常用扩展与通用类前端、后台提供了近300个扩展方法与属性,开发人员可在此功能上编写扩展自定义业务代码代码...

    2024-02-01 03:55:03
  • LeetCode--相关二叉树的例题与理解

    1、相同的树 给定两个二叉树,编写一个函数来检验它们是否相同。 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的。 示例 1: 输入: 1 1 / \ / \ 2 3 2 3 [1,2,3], [1,2,3] 输出: true 示例 2: 输入:...

    2024-02-01 03:54:57
  • C#软件开发实例.私人订制自己的屏幕截图工具(七)添加放大镜的功能

    C#软件开发实例.私人订制自己的屏幕截图工具(七)添加放大镜的功能

    上一篇:C#软件开发实例.私人订制自己的屏幕截图工具(六)添加配置管理功能 由于截图时可能需要精确截取某一部分,所以需要放大镜的功能,这样截取的时候才更容易定位截图的位置。 添加PictureBox,name属性设置为“pictureBox_zoom”; 在“Form1_Load”事件处理函数中添加以下代码: //设置放大镜的大小 this.pictureBox_zoo...

    2024-02-01 03:54:27
  • 快速复现利用Log4j漏洞启动windows计算器

    快速复现利用Log4j漏洞启动windows计算器

    了解关于漏洞的描述,可以参考Vulnerability Affecting Multiple Log4j Versions Permits RCE Exploit根据文章描述,首先下载JDK1.8u1...

    2024-02-01 03:54:20
  • vue计算属性computed和侦听器watch的使用场景

    vue计算属性computed和侦听器watch的使用场景

    原文链接:https://dsx2016.com/?p=679 微信公众号: 大师兄2016 特点和区别 vue的computed选项主要用于同步对数据的处理,而watch选项主要用于事件的派发,可异步. 这两者都能达到同样的效果,但是基于它们各自的特点,使用场景会有一些区分. computed拥有缓存属性,只有当依赖的数据发生变化时,关联的数据才会变化,适用于计算或者格式化数据的...

    2024-02-01 03:54:13
  • java程序设计任务驱动教程学习笔记二

    java程序设计任务驱动教程学习笔记二

    一、标识符与关键字

    2024-02-01 03:53:43