vue项目使用Vue-draggable组件实现表格拖拽

一. 下载依赖包：npm install vuedraggable -S
二. 在需要使用的当前界面引入依赖，注册组件：

import draggable from 'vuedraggable'

export default {
   
  components: {
    draggable },
 }

三. 在template 中建立表格，分别写出thead 部分不变， 此处需要将draggable 渲染成tbody，不然draggable会被解析成div 影响样式。

<table class="dataTabble">
      <thead>
        <tr>
          <th width="50" class="my-th">
            <a-checkbox @change="onChangeAll" :checked="checkedAll" :indeterminate="indeterminate" :disabled="list.length===0"></a-checkbox>
          </th>
          <th v-for="(item,index) in theadList" :width="item.width" :key="index" class="my-th">{
   {
    item.title }}</th>
        </tr>
      </thead>
      <draggable v-if="list.length>0" v-model="list" element="tbody" handle=".hand" @update="datadrag