vue實現(xiàn)前端列表拖拽功能

更新時間：2023年12月19日 14:57:18 作者：我是Superman丶

這篇文章主要為大家詳細介紹了如何利用vue實現(xiàn)前端列表拖拽功能,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下

使用組件

yarn add sortablejs --save

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

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

<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數(shù)據(jù)
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();
          // 每一次拖拽后都要重繪一次
        },
      });
    },
    /**
     * 第一個表格的
     * 觸發(fā)表格重繪
     */
    reDrawTable1() {
      this.tableKey1 = Math.random();
      this.$nextTick(() => {
        // this.rowDrop();
        this.rowDrop1();
      });
    },
    
    
    
    /**
     * 第二個表格的
     * 行拖拽
     */
    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();
          // 每一次拖拽后都要重繪一次
        },
      });
    },
    /**
     * 第二個表格的
     * 觸發(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: "部門",
        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: "行政職務(wù)",
        prop: "duty"
    },
    {
        disabled: false,
        isCheck: true,
        width: "140px",
        label: "行政職務(wù)時間",
        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: "法律職務(wù)",
        prop: "legislation"
    },
    {
        disabled: false,
        isCheck: true,
        width: "140px",
        label: "法律職務(wù)時間",
        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ā)過火",
        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"
    },
];

以上就是vue實現(xiàn)前端列表拖拽功能的詳細內(nèi)容，更多關(guān)于vue列表拖拽的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: