【工具】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"},
];