commit

src/pages/config/pages/linkManage/index.vue

@@ -50,7 +50,7 @@
 <!--            label="序号"-->
 <!--            sortable-->
 <!--            width="170px">-->
-        </el-table-column>
+<!--        </el-table-column>-->
         <el-table-column
             label="操作"
             width="50px">
@@ -103,6 +103,7 @@
 </template>
 
 <script>
+    import Sortable from 'sortablejs'
   export default {
     name: "linkManage",
     data () {
@@ -143,7 +144,8 @@
           children: 'children'
         },
 
-        linkList: []
+        linkList: [],
+          sortData: [],
       }
     },
     methods: {
@@ -299,8 +301,26 @@
             loading: 'Loading'
           }, res=> {
           this.linkList = res.data
+            this.initSortable()
         })
       },
+        initSortable () {
+            this.sortData = [...this.linkList]
+            const el = document.querySelector('.el-table__body-wrapper tbody')
+            //创建拖拽对象
+            this.sortable = Sortable.create(el, {
+                sort: true, //是否可进行拖拽排序
+                animation: 150,
+                onEnd: ({newIndex, oldIndex}) => {
+                    const val = this.sortData[oldIndex]
+                    this.sortData.splice(oldIndex, 1)
+                    this.sortData.splice(newIndex, 0, val)
+                    this.sortData.forEach((item, index) => {
+                        item.orderBy = index + 1
+                    })
+                }
+            })
+        },
     },
     mounted() {
       this.getLink();
@@ -319,4 +339,4 @@
       height: calc(~'100% - 50px')
     }
   }
-</style>
+</style>