vue vuedraggable table行拖動

1.安裝插件

npm i vuedraggable --save

2.按需引入

import draggable from 'vuedraggable'

3.使用部分

<div class="property_table_part">
                    <thead>
                        <tr>
                            <th  width="200">屬性名稱</th>
                            <th  width="40">層級</th>
                            <th  width="60">隱藏/顯示</th>
                            <th  width="40">排序</th>
                            <th  width="60">操作</th>
                        </tr>
                    </thead>
                    <draggable
                        class="widget-area"
                        :move="widgetMove"
                        @add="doNothing"
                        style="padding-top: 2px"
                        @update="datadragEnd"
                    >
                    <tr v-for="(item,index) in propertyTableData" :key="index"> 
                        <td width="200">{{item.name}}</td>
                        <td  width="40">{{item.level}}</td>
                        <td  width="60">{{item.isShow}}</td>
                        <td  width="40">{{index}}</td>
                        <td  width="60"><a>編輯</a></td>
                    </tr>

                    </draggable>
                </div>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章