vuedraggable插件使用

在vue中实现表格行拖拽功能，ant design vue中的table组件暂时还没有支持该功能，根据官方建议使用draggable插件来实现

步骤

一、安装插件

    npm i vuedraggable --save

二、vue中引入插件

       import Draggable from 'vuedraggable';

三、编写原生table

    <table class="custom-table">
        <thead>
            <tr>
                <th>column1</th>
                <th>column2</th>
                <th>操作</th>
            </tr>
        </thead>
        <Draggable element="tbody">
            <tr v-for="(item, index) in choose" :key="index">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td><a-icon type="minus" @click="handleMethod(index)"/></td>
            </tr>
        </Draggable>
    </table>

四、调整样式（参考ant design vue组件风格）

    /deep/.custom-table {
      width: 100%;
      line-height: 1.5;
      text-align: left;
      border-radius: 4px 4px 0 0;
      border-collapse: separate;
      border-spacing: 0;
    }

    /deep/.custom-table thead th{
        padding: 16px 16px;
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        text-align: left;
        background: #fafafa;
        border-bottom: 1px solid #e8e8e8;
        transition: background 0.3s ease;
    }

    /deep/.custom-table tr td {
        padding: 16px 16px;
        overflow-wrap: break-word;
        border-bottom: 1px solid #e8e8e8;
        transition: all 0.3s, border 0s;
    }

五、draggable element元素

element元素重新定义标签类型，如果无element则为div元素，如果有element则为定义的标签类型

无element的情况

有element的情况

六、使用v-model绑定数据，使得修改后的值可以渲染到页面以及传递给后端