Vue 組件總結 (一、拖拽組件 Vue-draggable)
阿新 • • 發佈:2018-05-09
Vue-draggable vue 一、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)