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

使用組件

yarn add sortablejs --save

Sortable.js中文網(wǎng) (sortablejs.com)

以下代碼只是舉個(gè)例子， 大家可以舉一反三去實(shí)現(xiàn)各自的業(yè)務(wù)功能

<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數(shù)據(jù)
import DataList1 from "./DataList1.js";
import DataList2 from "./DataList2.js";export default {name: 'HelloWorld',data(){return {DataListShow:1,//第1個(gè)表格的配置tableKey1:0,DataList1:DataList1,//第2個(gè)表格的配置tableKey2:0,DataList2:DataList2,}},mounted() {//開(kāi)始 行拖拽this.rowDrop1();},methods:{切換列表(列表號(hào)){this.DataListShow = 列表號(hào)this.$nextTick(() => {if(列表號(hào) === 1){//啟動(dòng)列表一拖拽this.rowDrop1();}else{//啟動(dòng)列表二拖拽this.rowDrop2();}});},/*** 第一個(gè)表格的* 行拖拽*/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();// 每一次拖拽后都要重繪一次},});},/*** 第一個(gè)表格的* 觸發(fā)表格重繪*/reDrawTable1() {this.tableKey1 = Math.random();this.$nextTick(() => {// this.rowDrop();this.rowDrop1();});},/*** 第二個(gè)表格的* 行拖拽*/rowDrop2() {const _this = this;// console.log("數(shù)據(jù)", 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();// 每一次拖拽后都要重繪一次},});},/*** 第二個(gè)表格的* 觸發(fā)表格重繪*/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: "部門(mén)",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: "參加工作時(shí)間",prop: "workTime"},{disabled: false,isCheck: true,width: "100px",label: "行政職務(wù)",prop: "duty"},{disabled: false,isCheck: true,width: "140px",label: "行政職務(wù)時(shí)間",prop: "dutyTime"},{disabled: false,isCheck: true,width: "80px",label: "行政職級(jí)",prop: "jobGrade"},{disabled: false,isCheck: true,width: "140px",label: "行政職級(jí)時(shí)間",prop: "jobGradeTime"},{disabled: false,isCheck: true,width: "110px",label: "等級(jí)",prop: "rank"},{disabled: false,isCheck: true,width: "80px",label: "等級(jí)時(shí)間",prop: "rankTime"},{disabled: false,isCheck: true,width: "100px",label: "法律職務(wù)",prop: "legislation"},{disabled: false,isCheck: true,width: "140px",label: "法律職務(wù)時(shí)間",prop: "legislationTime"},{disabled: false,isCheck: true,width: "80px",label: "全日制學(xué)歷",prop: "fullTimeEducation"},{disabled: false,isCheck: true,width: "80px",label: "全日制學(xué)位",prop: "fullTimeDegree"},{disabled: false,isCheck: true,width: "80px",label: "全日制專業(yè)",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: "發(fā)公告",prop: "workTime"},{disabled: false,isCheck: true,width: "100px",label: "人同意",prop: "duty"},{disabled: false,isCheck: true,width: "140px",label: "大幅度發(fā)給",prop: "dutyTime"},{disabled: false,isCheck: true,width: "80px",label: "就發(fā)過(guò)火",prop: "jobGrade"},{disabled: false,isCheck: true,width: "140px",label: "try二食堂",prop: "jobGradeTime"},{disabled: false,isCheck: true,width: "110px",label: "結(jié)果",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: "消防管道發(fā)給",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"},
];