devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue+el-table行排序 【上移下移】【拖拽排序】_el-table里面的数据托拉拽

作者：weixin_40725706 | 2024-02-20 02:39:50

赞

踩

el-table里面的数据托拉拽

一、上移下移

  1. <template>
  2.   <div>
  3.     <el-table :data="tableData">
  4.       <el-table-column type="selection" width="50"> </el-table-column>
  5.       <el-table-column prop="date" label="日期"></el-table-column>
  6.       <el-table-column prop="name" label="姓名"></el-table-column>
  7.       <el-table-column prop="address" label="地址"></el-table-column>
  8.       <el-table-column align="center" label="操作">
  9.         <template slot-scope="scope">
  10.           <el-button
  11.             size="mini"
  12.             icon="el-icon-bottom"
  13.             :disabled="scope.$index === tableData.length - 1"
  14.             @click="moveDown(scope.$index, scope.row)"
  15.           >
  16.           </el-button>
  17.           <el-button
  18.             size="mini"
  19.             icon="el-icon-top"
  20.             :disabled="scope.$index === 0"
  21.             @click="moveUp(scope.$index, scope.row)"
  22.           >
  23.           </el-button>
  24.         </template>
  25.       </el-table-column>
  26.     </el-table>
  27.     <pre style="text-align: left">
  28.       {{ tableData }}
  29.     </pre>
  30.   </div>
  31. </template>
  32. <script>
  33. // import Sortable from "sortablejs";
  34. export default {
  35.   data() {
  36.     return {
  37.       tableData: [
  38.         {
  39.           date: "2016-05-02",
  40.           name: "王小虎1",
  41.           address: "上海市普陀区金沙江路 100 弄",
  42.         },
  43.         {
  44.           date: "2016-05-04",
  45.           name: "王小虎2",
  46.           address: "上海市普陀区金沙江路 200 弄",
  47.         },
  48.         {
  49.           date: "2016-05-01",
  50.           name: "王小虎3",
  51.           address: "上海市普陀区金沙江路 300 弄",
  52.         },
  53.         {
  54.           date: "2016-05-03",
  55.           name: "王小虎4",
  56.           address: "上海市普陀区金沙江路 400 弄",
  57.         },
  58.       ],
  59.     };
  60.   },
  61.   mounted() {},
  62.   methods: {
  63.     // 上移
  64.     moveUp(index, row) {
  65.       console.log("上移", index, row);
  66.       if (index > 0) {
  67.         const upDate = this.tableData[index - 1];
  68.         this.tableData.splice(index - 1, 1);
  69.         this.tableData.splice(index, 0, upDate);
  70.       } else {
  71.         alert("已经是第一条，不可上移");
  72.       }
  73.     },
  74.     // 下移
  75.     moveDown(index, row) {
  76.       console.log("下移", index, row);
  77.       if (index + 1 === this.tableData.length) {
  78.         alert("已经是最后一条，不可下移");
  79.       } else {
  80.         const downDate = this.tableData[index + 1];
  81.         this.tableData.splice(index + 1, 1);
  82.         this.tableData.splice(index, 0, downDate);
  83.       }
  84.     },
  85.   },
  86. };
  87. </script>

二、拖拽排序 

安装vuedraggable

cnpm i -S vuedraggable

局部引用：

  1. //导入draggable组件
  2. import draggable from "vuedraggable";
  3. export default {
  4.   //注册draggable组件
  5.   components: {
  6.     draggable,
  7.   }
  8. }

使用：

  1. <template>
  2.   <div style="font-size: 20px">
  3.     <!--使用draggable组件-->
  4.     <p>选择缓存</p>
  5.     <draggable :group="groupName" v-model="cacheSelected" @end="onEnd_selected"  
  6.  chosenClass="chosen"  animation="300">
  7.       <div
  8.         class="item"
  9.         v-for="(item, index) in cacheSelected"
  10.         :key="index"
  11.         style="
  12.           cursor: pointer;
  13.           line-height: 25px;
  14.           margin: 5px 0;
  15.           border: 1px solid gray;
  16.         "
  17.       >
  18.         {{ item }}
  19.       </div>
  20.     </draggable>
  21.     <div>------------------------------------------</div>
  22.     <draggable :group="groupName" v-model="allCache" @end="onEnd_all">
  23.       <div
  24.         class="item"
  25.         v-for="(item, index) in allCache"
  26.         :key="index"
  27.         style="
  28.           cursor: pointer;
  29.           line-height: 25px;
  30.           margin: 5px 0;
  31.           border: 1px solid gray;
  32.         "
  33.       >
  34.         {{ item }}
  35.       </div>
  36.     </draggable>
  37.   </div>
  38. </template>
  39. <script>
  40. //导入draggable组件
  41. import draggable from "vuedraggable";
  42. export default {
  43.   //注册draggable组件
  44.   components: {
  45.     draggable,
  46.   },
  47.   data() {
  48.     return {
  49.       groupName: "groupName",
  50.       //定义要被拖拽对象的数组
  51.       cacheSelected: [],
  52.       allCache: ["dat", "disk", "redis", "memcache", "mbtiles"],
  53.     };
  54.   },
  55.   methods: {
  56.     //拖拽结束事件
  57.     onEnd_selected() {
  58.       console.log("this.cacheSelected:", this.cacheSelected);
  59.     },
  60.     onEnd_all() {
  61.       console.log("this.allCache:", this.allCache);
  62.     },
  63.   },
  64. };
  65. </script>
  66. <style lang="scss" scoped>
  67.  
  68.   .chosen {
  69.     border: solid 1px #3089dc !important;
  70.   }
  71.  
  72.  
  73. </style>

el-table中行拖拽排序：

参考：el-table拖拽之sortablejs_shimh_凉茶的博客-CSDN博客_sortablejs 安装el-table拖拽之sortablejs可实现行拖拽和列拖拽代码简单易懂无冗余https://blog.csdn.net/weixin_34403976/article/details/123676815【Vue 项目】使用 vuedraggable 实现拖拽效果时遇到的问题及解决方案总结（允许 el-table 行拖拽、部分元素不允许拖拽、拖拽避免影响文字复制和输入框输入文字）_只爭朝夕不負韶華的博客-CSDN博客_draggable el-table在最近的开发过程中，遇到了关于拖拽排序的功能需求。在这里向大家推荐使用 vuedraggable。https://blog.csdn.net/qq_45613931/article/details/124101105 

el-table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况

  1. <template>
  2.   <div>
  3.     <el-table :data="tableData" row-key="id">
  4.       <el-table-column prop="date" label="日期"></el-table-column>
  5.       <el-table-column prop="name" label="姓名"></el-table-column>
  6.       <el-table-column prop="address" label="地址"></el-table-column>
  7.     </el-table>
  8.     <pre style="text-align: left">
  9.       {{ tableData }}
  10.     </pre>
  11.   </div>
  12. </template>
  13. <script>
  14. import Sortable from "sortablejs";
  15. export default {
  16.   data() {
  17.     return {
  18.       tableData: [
  19.         {
  20.           id: "1",
  21.           date: "2016-05-02",
  22.           name: "王小虎1",
  23.           address: "上海市普陀区金沙江路 100 弄",
  24.         },
  25.         {
  26.           id: "2",
  27.           date: "2016-05-04",
  28.           name: "王小虎2",
  29.           address: "上海市普陀区金沙江路 200 弄",
  30.         },
  31.         {
  32.           id: "3",
  33.           date: "2016-05-01",
  34.           name: "王小虎3",
  35.           address: "上海市普陀区金沙江路 300 弄",
  36.         },
  37.         {
  38.           id: "4",
  39.           date: "2016-05-03",
  40.           name: "王小虎4",
  41.           address: "上海市普陀区金沙江路 400 弄",
  42.         },
  43.       ],
  44.     };
  45.   },
  46.   mounted() {
  47.     this.rowDrop();
  48.   },
  49.   methods: {
  50.     //行拖拽
  51.     rowDrop() {
  52.       const tbody = document.querySelector(".el-table__body-wrapper tbody");
  53.       const _this = this;
  54.       Sortable.create(tbody, {
  55.         onEnd({ newIndex, oldIndex }) {
  56.           const currRow = _this.tableData.splice(oldIndex, 1)[0];
  57.           _this.tableData.splice(newIndex, 0, currRow);
  58.         },
  59.       });
  60.     },
  61.   },
  62. };
  63. </script>

el-table行和列都可以拖拽排序：

  1. <template>
  2.   <div style="width: 800px">
  3.     <el-table :data="tableData" border row-key="id" align="left">
  4.       <el-table-column
  5.         v-for="(item, index) in col"
  6.         :key="`col_${index}`"
  7.         :prop="dropCol[index].prop"
  8.         :label="item.label"
  9.       >
  10.       </el-table-column>
  11.     </el-table>
  12.     <pre style="text-align: left">
  13.       {{ dropCol }}
  14.     </pre>
  15.     <hr />
  16.     <pre style="text-align: left">
  17.       {{ tableData }}
  18.     </pre>
  19.   </div>
  20. </template>
  21. <script>
  22. import Sortable from "sortablejs";
  23. export default {
  24.   data() {
  25.     return {
  26.       col: [
  27.         {
  28.           label: "日期",
  29.           prop: "date",
  30.         },
  31.         {
  32.           label: "姓名",
  33.           prop: "name",
  34.         },
  35.         {
  36.           label: "地址",
  37.           prop: "address",
  38.         },
  39.       ],
  40.       dropCol: [
  41.         {
  42.           label: "日期",
  43.           prop: "date",
  44.         },
  45.         {
  46.           label: "姓名",
  47.           prop: "name",
  48.         },
  49.         {
  50.           label: "地址",
  51.           prop: "address",
  52.         },
  53.       ],
  54.       tableData: [
  55.         {
  56.           id: "1",
  57.           date: "2016-05-02",
  58.           name: "王小虎1",
  59.           address: "上海市普陀区金沙江路 100 弄",
  60.         },
  61.         {
  62.           id: "2",
  63.           date: "2016-05-04",
  64.           name: "王小虎2",
  65.           address: "上海市普陀区金沙江路 200 弄",
  66.         },
  67.         {
  68.           id: "3",
  69.           date: "2016-05-01",
  70.           name: "王小虎3",
  71.           address: "上海市普陀区金沙江路 300 弄",
  72.         },
  73.         {
  74.           id: "4",
  75.           date: "2016-05-03",
  76.           name: "王小虎4",
  77.           address: "上海市普陀区金沙江路 400 弄",
  78.         },
  79.       ],
  80.     };
  81.   },
  82.   mounted() {
  83.     this.rowDrop();
  84.     this.columnDrop();
  85.   },
  86.   methods: {
  87.     //行拖拽
  88.     rowDrop() {
  89.       const tbody = document.querySelector(".el-table__body-wrapper tbody");
  90.       const _this = this;
  91.       Sortable.create(tbody, {
  92.         onEnd({ newIndex, oldIndex }) {
  93.           const currRow = _this.tableData.splice(oldIndex, 1)[0];
  94.           _this.tableData.splice(newIndex, 0, currRow);
  95.         },
  96.       });
  97.     },
  98.     //列拖拽
  99.     columnDrop() {
  100.       const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
  101.       this.sortable = Sortable.create(wrapperTr, {
  102.         animation: 180,
  103.         delay: 0,
  104.         onEnd: (evt) => {
  105.           const oldItem = this.dropCol[evt.oldIndex];
  106.           this.dropCol.splice(evt.oldIndex, 1);
  107.           this.dropCol.splice(evt.newIndex, 0, oldItem);
  108.         },
  109.       });
  110.     },
  111.   },
  112. };
  113. </script>

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号