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

【工具】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-table
        v-if="DataListShow === 1"
        :data="DataList1"
        ref="refTable1"
        class="ELtable"
        size="small"
        stripe
        :key="tableKey1"
        :row-key="
        (row) => {
          return row.prop;
        }
      "
    >
      <el-table-column
          label="编码"
          align="center"
          prop="label"
      ></el-table-column>
      <el-table-column
          label="名称"
          align="center"
          prop="label"
      ></el-table-column>
    </el-table>
    
    <el-table
        v-if="DataListShow === 2"
        :data="DataList2"
        ref="refTable2"
        class="ELtable"
        size="small"
        stripe
        :key="tableKey2"
        :row-key="
        (row) => {
          return row.prop;
        }
      "
    >
      <el-table-column
          label="编码"
          align="center"
          prop="prop"
      ></el-table-column>
      <el-table-column
          label="名称"
          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 = this
      const _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"
    },
];