增加kol的table

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

+<template>
+  <div class="kmc">
+    <el-row class="table-content">
+      <!-- 表格 -->
+      <div class="table-title">
+        <span class="table-t" v-for="(item,index) of titleList" :key="index">{{item.title}}</span>
+      </div>
+      <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" >{{ element.name }}</div>
+                <div class="styleclass" >{{ element.district }}</div>
+                <div class="styleclass" >{{ element.hospital }}</div>
+                <div class="styleclass" >{{ element.department }}</div>
+                <div class="styleclass" >{{ element.title }}</div>
+                <div class="styleclass" >{{ element.team }}</div>
+                <div class="styleclass" >{{ element.status }}</div>
+                <div class="styleclass" >
+                    <el-button type="danger" size="small" @click="deletefn(index)">删除</el-button>
+                </div>
+            </div>
+        </transition-group>
+      </draggable>
+    </el-row>
+    
+    
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    tableData: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      groupData: [],
+      titleList: [
+        {
+          title: '顺序'
+        },
+        {
+          title: '姓名'
+        },
+        {
+          title: '地区'
+        },
+        {
+          title: '所在医院'
+        },
+        {
+          title: '科室'
+        },
+        {
+          title: '职称'
+        },
+        {
+          title: '所属团队'
+        },
+        {
+          title: '发布状态'
+        },
+        {
+          title: '操作'
+        }
+      ]
+    }
+  },
+  watch: {
+    tableData: {
+      deep: true,
+      immediate: true,
+      handler(newv){
+        this.groupData = newv
+      }
+    }
+  },
+  methods: {
+    getdata: function(evt){
+      console.log(evt.draggedContext.element.seqNo);
+    },
+    datadragEnd:function(evt){
+      console.log('拖动前的索引：'+evt.oldIndex);
+      console.log('拖动后的索引：'+evt.newIndex);
+    },
+    deletefn(index) {
+      this.groupData.splice(index,1)
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.table-content {
+  margin-top: 15px;
+}
+.save-btn {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+.table-title {
+  display: flex;
+  height: 60px;
+  line-height: 60px;
+  background: #fafafa;
+  border-bottom: 1px solid #efefef;
+  .table-t {
+    flex: 1;
+    width: 11%;
+    display: inline-block;
+    text-align: center;
+  }
+}
+.dargDiv {
+  display: flex;
+  padding: 20px 0;
+  border-bottom: 1px solid #efefef;
+  overflow: hidden;
+}
+.dargDiv .styleclass{
+    flex: 1;
+    width: 11%;
+    text-align: center;
+    height: 100px;
+    // line-height: 100px;
+    // overflow: hidden;
+    // text-overflow:ellipsis;
+    // white-space: nowrap;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+</style>

src/main.js

@@ -6,6 +6,8 @@ import store from './store/'
 const mixins = require('@/utils/mixins');
 import FastClick from 'fastclick'
 import vueFilters from '@/utils/filter'
+import draggable from 'vuedraggable'
+Vue.component('draggable', draggable);
 // import '@/utils/toBlob';
 
 // 引入ElementUI