【工具】VUE 前端列表拖拽功能代码

使用组件

yarn add sortablejs --save

Sortable.js中文网 (sortablejs.com)

以下代码只是举个例子， 大家可以举一反三去实现各自的业务功能

<template><div><el-button type="primary" @click="切换列表(1)">列表一</el-button><el-button type="success" @click="切换列表(2)">列表二</el-button><el-tablev-if="DataListShow === 1":data="DataList1"ref="refTable1"class="ELtable"size="small"stripe:key="tableKey1":row-key="(row) => {return row.prop;}"><el-table-columnlabel="编码"align="center"prop="label"></el-table-column><el-table-columnlabel="名称"align="center"prop="label"></el-table-column></el-table><el-tablev-if="DataListShow === 2":data="DataList2"ref="refTable2"class="ELtable"size="small"stripe:key="tableKey2":row-key="(row) => {return row.prop;}"><el-table-columnlabel="编码"align="center"prop="prop"></el-table-column><el-table-columnlabel="名称"align="center"prop="label"></el-table-column></el-table></div>
</template><script>// 引入Sortable表格拖拽插件
import Sortable from "sortablejs";//引入模拟的data数据
import DataList1 from "./DataList1.js";
import DataList2 from "./DataList2.js";export default {name: 'HelloWorld',data(){return {DataListShow:1,//第1个表格的配置tableKey1:0,DataList1:DataList1,//第2个表格的配置tableKey2:0,DataList2:DataList2,}},mounted() {//开始 行拖拽this.rowDrop1();},methods:{切换列表(列表号){this.DataListShow = 列表号this.$nextTick(() => {if(列表号 === 1){//启动列表一拖拽this.rowDrop1();}else{//启动列表二拖拽this.rowDrop2();}});},/*** 第一个表格的* 行拖拽*/rowDrop1() {window.aaa = thisconst _this = this;const wrapperTr = this.$refs.refTable1.$el.querySelector(".el-table__body-wrapper tbody");this.sortable = Sortable.create(wrapperTr, {handle:'.el-table__row',animation: 350,delay: 0,easing:'cubic-bezier(0.34, 1.56, 0.64, 1)',onEnd: (evt) => {const oldItem = _this.DataList1[evt.oldIndex];_this.DataList1.splice(evt.oldIndex, 1);_this.DataList1.splice(evt.newIndex, 0, oldItem);_this.reDrawTable1();// 每一次拖拽后都要重绘一次},});},/*** 第一个表格的* 触发表格重绘*/reDrawTable1() {this.tableKey1 = Math.random();this.$nextTick(() => {// this.rowDrop();this.rowDrop1();});},/*** 第二个表格的* 行拖拽*/rowDrop2() {const _this = this;// console.log("数据", this.schemas);const wrapperTr = this.$refs.refTable2.$el.querySelector(".el-table__body-wrapper tbody");this.sortable = Sortable.create(wrapperTr, {handle:'.el-table__row',animation: 350,delay: 0,easing:'cubic-bezier(0.34, 1.56, 0.64, 1)',onEnd: (evt) => {const oldItem = _this.DataList2[evt.oldIndex];_this.DataList2.splice(evt.oldIndex, 1);_this.DataList2.splice(evt.newIndex, 0, oldItem);_this.reDrawTable2();// 每一次拖拽后都要重绘一次},});},/*** 第二个表格的* 触发表格重绘*/reDrawTable2() {this.tableKey2 = Math.random();this.$nextTick(() => {// this.rowDrop();this.rowDrop2();});},}}
</script>

DataList1.js

export default [{disabled: true,isCheck: true,fixed:true,width: "100px",label: "姓名",prop: "name"},{disabled: false,isCheck: true,width: "180px",label: "单位",prop: "unitName"},{disabled: false,isCheck: true,width: "80px",label: "部门",prop: "departmentName"},{disabled: false,isCheck: true,width: "80px",label: "性别",prop: "sex"},{disabled: false,isCheck: true,width: "80px",label: "出生年月",prop: "birthday"},{disabled: false,isCheck: true,width: "100px",label: "籍贯",prop: "places"},{disabled: false,isCheck: true,width: "140px",label: "参加工作时间",prop: "workTime"},{disabled: false,isCheck: true,width: "100px",label: "行政职务",prop: "duty"},{disabled: false,isCheck: true,width: "140px",label: "行政职务时间",prop: "dutyTime"},{disabled: false,isCheck: true,width: "80px",label: "行政职级",prop: "jobGrade"},{disabled: false,isCheck: true,width: "140px",label: "行政职级时间",prop: "jobGradeTime"},{disabled: false,isCheck: true,width: "110px",label: "等级",prop: "rank"},{disabled: false,isCheck: true,width: "80px",label: "等级时间",prop: "rankTime"},{disabled: false,isCheck: true,width: "100px",label: "法律职务",prop: "legislation"},{disabled: false,isCheck: true,width: "140px",label: "法律职务时间",prop: "legislationTime"},{disabled: false,isCheck: true,width: "80px",label: "全日制学历",prop: "fullTimeEducation"},{disabled: false,isCheck: true,width: "80px",label: "全日制学位",prop: "fullTimeDegree"},{disabled: false,isCheck: true,width: "80px",label: "全日制专业",prop: "fullTimeMajor"},{disabled: false,isCheck: true,width: "100px",label: "政治面貌",prop: "politicsStatus"},
];

DataList2.js

export default [{disabled: true,isCheck: true,fixed:true,width: "100px",label: "还是",prop: "name"},{disabled: false,isCheck: true,width: "180px",label: "撒大哥",prop: "unitName"},{disabled: false,isCheck: true,width: "80px",label: "官方",prop: "departmentName"},{disabled: false,isCheck: true,width: "80px",label: "体育",prop: "sex"},{disabled: false,isCheck: true,width: "80px",label: "精明能干",prop: "birthday"},{disabled: false,isCheck: true,width: "100px",label: "可以广泛",prop: "places"},{disabled: false,isCheck: true,width: "140px",label: "发公告",prop: "workTime"},{disabled: false,isCheck: true,width: "100px",label: "人同意",prop: "duty"},{disabled: false,isCheck: true,width: "140px",label: "大幅度发给",prop: "dutyTime"},{disabled: false,isCheck: true,width: "80px",label: "就发过火",prop: "jobGrade"},{disabled: false,isCheck: true,width: "140px",label: "try二食堂",prop: "jobGradeTime"},{disabled: false,isCheck: true,width: "110px",label: "结果",prop: "rank"},{disabled: false,isCheck: true,width: "80px",label: "分班表",prop: "rankTime"},{disabled: false,isCheck: true,width: "100px",label: "沃尔沃二",prop: "legislation"},{disabled: false,isCheck: true,width: "140px",label: "就体育与",prop: "legislationTime"},{disabled: false,isCheck: true,width: "80px",label: "消防管道发给",prop: "fullTimeEducation"},{disabled: false,isCheck: true,width: "80px",label: "宣传部成本",prop: "fullTimeDegree"},{disabled: false,isCheck: true,width: "80px",label: "明白你们帮你们",prop: "fullTimeMajor"},{disabled: false,isCheck: true,width: "100px",label: "大概的电饭锅电饭锅",prop: "politicsStatus"},
];