Elment ui中el-table 实现表格拖拽

Element ui el-table拖拽

拖动排序可对表格行进行拖拽排序

1.下载

npm install sortablejs --save

2.引用

import Sortable from "sortablejs";

3.表格

<el-tableref="formTable":data="formChildTable"class="form_table"borderfithighlight-current-row><el-table-column label="拖动排序" width="100" align="center"><svg-icon icon-class="grid" class="drag-btn" /></el-table-column><el-table-column label="工序名称" width="120" align="center"><template slot-scope="scope"><el-inputv-model="scope.row.name":disabled="!editOrCheckFlag"/></template></el-table-column><el-table-column label="标准工时" width="90" align="center"><template slot-scope="scope"><el-inputv-model="scope.row.standardDuration":disabled="!editOrCheckFlag"/></template></el-table-column><el-table-column label="前置工序" width="160" align="center"><template slot-scope="scope"><spanclass="pre_input"@click="preCodeClick(scope.row, scope.$index)">{{ scope.row.preCodeName }}</span></template></el-table-column><el-table-column label="配置时间" width="120" align="center"><template slot-scope="scope"><el-inputv-model="scope.row.locTime":disabled="!editOrCheckFlag"/></template></el-table-column><el-table-column label="楼层定位" width="95" align="center"><template slot-scope="scope"><el-inputv-model="scope.row.locFloor":disabled="!editOrCheckFlag"/></template></el-table-column><el-table-columnlabel="操作"align="center"class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-delete"@click="handleDeleteChild(scope.row, scope.$index)":disabled="!editOrCheckFlag">删除</el-button></template></el-table-column></el-table>

4.定义行和列

col: [{ label: "工序名称", prop: "name" },{ label: "标准工时", prop: "standardDuration" },{ label: "前置工序", prop: "preCodeName" },{ label: "前置工序", prop: "preCodeName" },{ label: "配置时间", prop: "locTime" },{ label: "楼层定位", prop: "locFloor" },],dropCol: [{ label: "工序名称", prop: "name" },{ label: "标准工时", prop: "standardDuration" },{ label: "前置工序", prop: "preCodeName" },{ label: "前置工序", prop: "preCodeName" },{ label: "配置时间", prop: "locTime" },{ label: "楼层定位", prop: "locFloor" },],

5.method方法

// 行拖拽rowDrop() {this.$nextTick(() => {this.sortable1 = Sortable.create(document.querySelector(".form_table .el-table__body-wrapper tbody"),{handle: ".drag-btn",onEnd: ({ newIndex, oldIndex }) => {this.formChildTable.splice(newIndex,0,this.formChildTable.splice(oldIndex, 1)[0]);var newArray = this.formChildTable.slice(0);this.formChildTable = [];this.$nextTick(function () {this.formChildTable = newArray;});},});});},

6.调用

this.rowDrop();

希望读到这篇文章会对你有帮助~，有帮助请留下一个赞(*╹▽╹*)

——————来自李易峰的小粉丝，凡凡同学

Elment ui中el-table 实现表格拖拽相关推荐

前端项目中常用的工具包（拖拽排序表格、打印导出表格、文本复制等）【持续更新~~~】
表格类: cdn库 cdn vxe-table[开源的多功能表格] 简介一个基于 vue 的 PC 端表格组件,支持增删改查.虚拟滚动.懒加载.快捷菜单.数据校验.树形结构.打印导出.表单渲染.数据 ...
Python中对table（表格）的应用
Python中对table(表格)的应用代码: from prettytable import PrettyTablefield_names = ("ID",'名字','英语成绩 ...
vue 基于elementUI、sortablejs的表格拖拽排序
安装 sortablejs npm install sortablejs template <el-tablerow-key="id":data="moduleCo ...
表格拖拽、树状拖拽的各种方法
一.简单的表格拖拽 1.sortablejs 地址:https://www.itxst.com/sortablejs/neuinffi.html 配置项: http://www.sortablejs. ...
Vue + Element 表格拖拽排序、树形表格拖拽排序
今天给大家分享一下表格(列表)及树形表格拖拽排序,树形表格排序的教程不多,可能还会有问题,我在这里详细给大家讲解一下,如果你有这样的需求或觉得有用,请给个关注或收藏一下吧,方便后期查看使用. 安装so ...
vue+sortable实现表格拖拽
vue+sortable实现表格拖拽前言: 支持 vue3.0 支持表格拖拽支持自定义拖拽 sortable官网一.下载 sortable npm install sortablejs --sa ...
Vue2 + ant design vue1.7.8版本 Table组件手动拖拽、可伸缩列功能
低版本的antd table组件官网文档上有可伸缩列功能,但是用起来有很明显的bug,无法直接拿来用:接下来给大家提供一个手写的拖拽方案: 1.首先,写好v-table组件,这里最重要的就是tabl ...
前端elementui表格拖拽sortablejs避坑，vue2前端表格列拖拽解决方案
sortablejs sortablejs是目前比较多人用的elementui表格拖拽的插件,但是这个插件的bug很不友好:主要bug是拖拽列后不能调整列的宽,处理这个bug只能是不让用户调整列宽. ...
计算机没鼠标怎么,计算机中没有鼠标如何进行拖拽
计算机中没有鼠标如何进行拖拽发布时间:2021-04-23 09:22:58 来源:亿速云阅读:53 作者:小新小编给大家分享一下计算机中没有鼠标如何进行拖拽,相信大部分人都还不怎么了解,因此分 ...
基于Vue实现表格拖拽排序——sortablejs
表格拖拽排序 1.安装插件 2.页面引入sortablejs 3.准备表格渲染所需的数据 4.绘制表格结构(要绑定唯一的值row-key,不然会出错) 5.完成表格行与列的拖拽排序事件 1.安装插件 ...

Elment ui中el-table 实现表格拖拽

Elment ui中el-table 实现表格拖拽相关推荐

最新文章

热门文章