ElementUI 基于vue+sortable.js实现表格行拖拽

简介: ElementUI 基于vue+sortable.js实现表格行拖拽

基于vue+sortable.js实现表格行拖拽


实践环境

sortablejs@1.13.0

vue@2.6.11

element-ui@2.13.2

安装sortable.js拖拽库


npm install sortablejs

代码示例

<template>
  <div class="demo-table-wrapper">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
import Sortable from "sortablejs";
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 弄1"
        },
        {
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1517 弄2"
        },
        {
          date: "2016-05-01",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 1519 弄3"
        },
        {
          date: "2016-05-03",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 1516 弄4"
        }
      ]
    };
  },
  mounted() {
    this.dragRow();
  },
  methods: {
    // 行拖拽
    dragRow() {
      // 查找要拖拽元素的父容器
      const tbody = document.querySelector(
        ".demo-table-wrapper .el-table__body-wrapper tbody"
      );
      const _this = this;
      Sortable.create(tbody, {
        draggable: ".demo-table-wrapper .el-table__row", //  指定父容器下可被拖拽的子元素
        onEnd({ newIndex, oldIndex }) {
          /**
           * onEnd 拖拽结束后的事件处理函数
           * newIndex:目标位置对应行的索引
           * oldIndex:被拖拽行的索引
           * 
           * ====================(被拖拽记录行1)
           * before
           * ====================(拖拽至目标位置对应记录行)
           * after
           * ====================(被拖拽记录行2)
           * 如果从上往下拖拽,即newIndex > oldIndex,那么在目标位置对应记录行上移(目标位置对应记录行索引值减1),在newIndex所指位置插入被拖拽行(被拖拽行索引设置为newIndex),视觉效果就是在after位置(即目标位置对应行下方)插入被拖拽行
           * 如果从下往上拖拽,即newIndex < oldIndex,那么在目标位置对应记录行下移(目标位置对应记录行索引值加1),在newIndex所指位置插入被拖拽行(被拖拽行索引设置为newIndex),视觉效果就是在上述before位置(即目标位置对应行上方)插入被拖拽行
           * */ 
          console.log(newIndex, oldIndex);
          if(newIndex > oldIndex){
              // 请求服务器做数据更新处理,然后根据处理结果对前端页面处理 
          } else {
              // 请求服务器做数据更新处理 ,然后根据处理结果对前端页面处理
          }           
        }
      });
    }
  }
};
</script>
<style scoped>
.demo-table-wrapper {
}
</style>

参考连接

http://www.itxst.com/sortablejs/neuinffi.html

目录
相关文章
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
549 77
|
12月前
vue3+Ts 二次封装ElementUI form表单
【10月更文挑战第8天】
832 59
|
6月前
|
存储 JavaScript 前端开发
基于 ant-design-vue 和 Vue 3 封装的功能强大的表格组件
VTable 是一个基于 ant-design-vue 和 Vue 3 的多功能表格组件,支持列自定义、排序、本地化存储、行选择等功能。它继承了 Ant-Design-Vue Table 的所有特性并加以扩展,提供开箱即用的高性能体验。示例包括基础表格、可选择表格和自定义列渲染等。
419 6
|
12月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
230 2
|
7月前
|
数据采集 前端开发 JavaScript
金融数据分析:解析JavaScript渲染的隐藏表格
本文详解了如何使用Python与Selenium结合代理IP技术,从金融网站(如东方财富网)抓取由JavaScript渲染的隐藏表格数据。内容涵盖环境搭建、代理配置、模拟用户行为、数据解析与分析等关键步骤。通过设置Cookie和User-Agent,突破反爬机制;借助Selenium等待页面渲染,精准定位动态数据。同时,提供了常见错误解决方案及延伸练习,帮助读者掌握金融数据采集的核心技能,为投资决策提供支持。注意规避动态加载、代理验证及元素定位等潜在陷阱,确保数据抓取高效稳定。
179 17
|
8月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
248 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
10月前
|
JavaScript 前端开发 异构计算
兼容移动手机的js拖拽插件Draggin.js
兼容移动手机的js拖拽插件Draggin.js
236 1
|
11月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
351 4
|
12月前
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表,支持用户动态添加设备部位和任务,并提供相应的表单验证规则。
1428 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
|
12月前
|
JavaScript

热门文章

最新文章