表格拖拽

package.json

@@ -22,6 +22,7 @@
     "pinia": "^2.1.7",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.77.8",
+    "sortablejs": "^1.15.3",
     "uuid": "^10.0.0",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html-env": "^1.2.8",

src/components/cus/CusTable.vue

@@ -2,6 +2,7 @@
   <div class="cus-table">
     <div class="cus-table-table">
       <el-table
+        v-if="state.dragRefresh"
         ref="ref_table"
         v-bind="$attrs"
         :data="data"
@@ -11,6 +12,11 @@
         @selection-change="v => $emit('update:selected', v)"
         max-height="100%"
       >
+        <el-table-column v-if="dragable" :width="50" align="center" fixed="left" prop="drag">
+          <template #default="scope">
+            <SvgIcon class="__hover drag-icon" name="move" color="var(--cus-text-color-1)"/>
+          </template>
+        </el-table-column>
         <el-table-column v-if="selected" type="selection" :width="selectWidth" align="center" :selectable="selectable"/>
         <el-table-column v-if="singled" :width="singledWidth" align="center" class-name="single-column" fixed="left">
           <template #default="scope">
@@ -144,12 +150,13 @@
 </template>
 
 <script setup lang="ts">
+import Sortable from 'sortablejs'
 defineOptions({
   name: 'CusTable',
 });
-import {computed, getCurrentInstance, reactive, ref, watch} from "vue";
+import {computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch} from "vue";
 
-const emit = defineEmits(['handleSort', 'handleFilter', 'handlePage', 'update:selected'])
+const emit = defineEmits(['handleSort', 'handleFilter', 'handlePage', 'update:selected', 'update:data'])
 const {proxy} = getCurrentInstance()
 const props = defineProps({
   pageNum: {},
@@ -166,9 +173,12 @@ const props = defineProps({
   selectable: {},
   tableHead: {default: []},
   noPage: {default: false},
-  pageSizes: {default: () => [10, 20, 30, 40, 50, 100]}
+  pageSizes: {default: () => [10, 20, 30, 40, 50, 100]},
+  dragable: {},
+})
+const state: any = reactive({
+  dragRefresh: true
 })
-const state: any = reactive({})
 const ref_table = ref()
 const handleSort = ({ column, prop, order }: any) => {
   emit('handleSort', {
@@ -203,6 +213,33 @@ watch(() => props.selected, (n: any) => {
     }, 100)
   }
 })
+const initDrag = () => {
+  nextTick(() => {
+    if (props.dragable) {
+      const tbody = ref_table.value.$el.querySelector('.el-table__body-wrapper tbody')
+      new Sortable(tbody, {
+        animation: 150,
+        handle: '.drag-icon', // 设置可拖拽行的类名(el-table自带的类名)
+        onEnd: ({newIndex, oldIndex}: any) => {
+          const d = [...props.data]
+          const targetRow = d[oldIndex]
+          d.splice(oldIndex, 1)
+          d.splice(newIndex, 0, targetRow)
+          console.log(d)
+          emit('update:data', [...d])
+          state.dragRefresh = false
+          setTimeout(() => {
+            state.dragRefresh = true
+            initDrag()
+          }, 0)
+        }
+      })
+    }
+  })
+}
+onMounted(() => {
+  initDrag()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -238,6 +275,7 @@ watch(() => props.selected, (n: any) => {
           max-height: 100% !important;
           .el-table__body {
             .el-table__row {
+              -webkit-user-drag: element;
               >td {
                 .cell {
                   font-size: 14px;