拖动table

src/components/yqrange/kol-component/kolTable.vue

@@ -8,7 +8,7 @@
       <draggable :list="groupData" :move="getdata" @update="datadragEnd" :options="{handle:'.dargDiv'}">
         <transition-group name="list-complete">
             <div v-for="(element, index) in groupData" :key="index" class="list-complete-item dargDiv" v-bind:class="{ border_top: index == 0}">
-                <div class="styleclass num" style="width: 100px">{{ index+1 }}</div>
+                <div class="styleclass" style="width: 100px">{{ index+1 }}</div>
                 <div class="styleclass" >{{ element.name }}</div>
                 <div class="styleclass" >{{ element.district }}</div>
                 <div class="styleclass" >{{ element.hospital }}</div>
@@ -82,7 +82,6 @@ export default {
   },
   methods: {
     getdata: function(evt){
-      console.log(evt.draggedContext.element.seqNo);
     },
     datadragEnd:function(evt){
       console.log('拖动前的索引：'+evt.oldIndex);
@@ -90,6 +89,12 @@ export default {
     },
     deletefn(index) {
       this.groupData.splice(index,1)
+    },
+    getNewData() {
+      this.groupData.forEach((element,index) => {
+        element.seq = index + 1
+      });
+      return this.groupData
     }
   },
 }

src/components/yqrange/kol-manage.vue

@@ -22,28 +22,7 @@
       </el-row>
     </el-form>
     <el-row class="table-content">
-      <el-table
-        :data="tableData"
-        border
-        id="kolTable"
-        style="width: 100%"
-      >
-        <el-table-column
-          show-overflow-tooltip
-          v-for="(item, key) in col"
-          :key="`col_${key}`"
-          :prop="col[key].prop"
-          :label="item.label"
-          align="center"
-        >
-          <template slot-scope="scope">
-            <p>{{ scope.row[item.prop] }}</p>
-            <div v-if="item.prop === 'operate'">
-              <el-button size="small" @click="deleteItem(scope.$index)">移除</el-button>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
+      <kol-table :tableData="tableData" ref="kolTable"></kol-table>
       <el-row class="save-btn">
         <el-button type="primary" @click="handleSave">保存</el-button>
       </el-row>
@@ -86,13 +65,12 @@
 </template>
 
 <script>
-import Sortable from 'sortablejs';
-import { kolCol } from './util/common';
+import kolTable from './kol-component/kolTable'
 import { getExpertList, getExperNametList } from '@/utils/yqrange/rangeApi'
 
 export default {
   components: {
-    Sortable
+    kolTable
   },
   props: {
     circleId: {
@@ -128,15 +106,11 @@ export default {
           { required: true, message: '请输入专家姓名或医院名称,多个关键字用空格隔开', trigger: 'change' },
         ],
       },
-      col: kolCol,
       tableData: []
     }
   },
   mounted() {
     this.initData();
-    this.$nextTick(() => {
-      this.rowDrop();
-    });
   },
   methods: {
     initData() {
@@ -151,10 +125,6 @@ export default {
         console.log('网络出现点儿问题，稍后重试')
       })
     },
-    rowDrop() {
-      const tbody = document.querySelector('#kolTable tbody');
-      Sortable.create(tbody);
-    },
     handleAdd() {
       this.addFormVisible = true;
       if (this.$refs['addForm']) {
@@ -164,9 +134,13 @@ export default {
       this.selectExpertItem = {};
     },
     handleSave() {
+      // 排序和删除后的table数据
+      let newTableData = this.$refs.kolTable.getNewData()
       this.$refs.ruleForm.validate((valid) => {
         if (valid) {
           // console.log('form校验通过')
+         
+          
         }
       });
     },