优化table 中的拖动位置和样式

src/App.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue'
+import {defineComponent} from 'vue'
 import locale from 'element-plus/lib/locale/lang/zh-cn'
-import { useStore } from 'vuex'
+import {useStore} from 'vuex'
 
 export default defineComponent({
   name: 'App',
@@ -34,7 +34,7 @@ export default defineComponent({
 function getWindowSize() {
   const w = window.innerWidth
   const h = window.innerHeight - 96
-  return { w, h }
+  return {w, h}
 }
 </script>
 
@@ -82,6 +82,11 @@ function getWindowSize() {
   color: blue;
 }
 
+.icon-shangxiatuodong {
+  cursor: move;
+  font-size: 12px;
+}
+
 .eltable .el-checkbox__inner {
   width: 16px;
   height: 16px;

src/components/si-sheet-upload/JieSuanDanXiangQing.vue

@@ -72,9 +72,9 @@
       入院病情： 1.有，2.临床未确定，3.情况不明，4.无
       <el-table :data="diseinfo" :height="store.state.app.windowSize.h / 2.5" stripe highlight-current-row
                 id="sortable-diseinfo" row-key="id">
-        <el-table-column width="40">
+        <el-table-column width="50">
           <template #default>
-            <i class="iconfont icon-shangxiatuodong" style="font-size: 20px"></i>
+            <el-button class="shangxiatuodong"><i class="iconfont icon-shangxiatuodong"></i></el-button>
           </template>
         </el-table-column>
         <el-table-column label="诊断代码" prop="disDiag"></el-table-column>
@@ -119,9 +119,9 @@
       <el-button type="success" icon="el-icon-circle-plus" @click="tianJiaXiuGaiShouShu(-1)">新增手术</el-button>
       <el-table :data="oprninfo" :height="store.state.app.windowSize.h / 2.5"
                 stripe highlight-current-row row-key="id" id="sortable-oprninfo">
-        <el-table-column width="40">
+        <el-table-column width="50">
           <template #default>
-            <i class="iconfont icon-shangxiatuodong" style="font-size: 20px"></i>
+            <el-button class="shangxiatuodong"><i class="iconfont icon-shangxiatuodong"></i></el-button>
           </template>
         </el-table-column>
         <el-table-column label="手术及操作名称" prop="ssmc"></el-table-column>
@@ -476,8 +476,8 @@ export default {
     /*一下都是手术的*/
     const shouShuDialog = ref(false)
     const formShouShu = ref({
-      id: null,
-      ssxh: null,
+      id: 0,
+      ssxh: 0,
       ssmc: '',
       ssrq: '',
       ssjb: '',
@@ -684,7 +684,6 @@ export default {
           auditStaff: code,
           auditName: name,
         }
-        console.log(data)
         setlUploadAudit(data
         ).then((res) => {
           guanBi()
@@ -809,10 +808,10 @@ export default {
       //设置拖拽的参数
       const ops = {
         animation: 200, //动画时长
-        handle: '.icon-shangxiatuodong', // 拖动的 class
-        onEnd(evt) {
-          const currRow = diseinfo.value.splice(evt.oldIndex, 1)[0]
-          diseinfo.value.splice(evt.newIndex, 0, currRow)
+        handle: '.shangxiatuodong', // 拖动的 class
+        onEnd({newIndex, oldIndex}) {
+          const currRow = diseinfo.value.splice(oldIndex, 1)[0]
+          diseinfo.value.splice(newIndex, 0, currRow)
           diseinfo.value.forEach((item, index) => {
             item.disDiagNo = index + 1
           })
@@ -825,11 +824,10 @@ export default {
       const el = document.querySelector("#sortable-oprninfo tbody");
       const ops = {
         animation: 200, //动画时长
-        handle: '.icon-shangxiatuodong',
-        onEnd(evt) {
-          const currRow = oprninfo.value.splice(evt.oldIndex, 1)[0]
-
-          oprninfo.value.splice(evt.newIndex, 0, currRow)
+        handle: '.shangxiatuodong',
+        onEnd({newIndex, oldIndex}) {
+          const currRow = oprninfo.value.splice(oldIndex, 1)[0]
+          oprninfo.value.splice(newIndex, 0, currRow)
           oprninfo.value.forEach((item, index) => {
             item.ssxh = index + 1
           })