Vue 组件总结 (拖拽组件 Vue-draggable)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 组件总结 (拖拽组件 Vue-draggable)相关的知识,希望对你有一定的参考价值。
一、vue-draggable 安装使用npm地址:
https://www.npmjs.com/package/vuedraggable
二、表格拖拽使用, 举例:
<table class="table table-condensed">
<thead>
<tr>
<th>视频ID</th>
<th>名称</th>
<th>作者</th>
<th>创建时间</th>
<th>时长</th>
<th>操作</th>
</tr>
</thead>
<draggable element="tbody" class="list-group" v-model="tableData">
<tr style="cursor:move;" v-for="(item,index) in tableData" :key="‘item‘+index">
<td>{{item.videoId}}</td>
<td>{{item.name}}</td>
<td>{{item.author.name}}</td>
<td>{{item.createTime}}</td>
<td>{{item.length}}</td>
<td>删除</td>
</tr>
</draggable>
</table>
<script>
import draggable from ‘vuedraggable‘
export default {
components: { draggable },
data() {
return {
tableData: {}
}
}
}
</script>
以上是关于Vue 组件总结 (拖拽组件 Vue-draggable)的主要内容,如果未能解决你的问题,请参考以下文章