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的情况