項目中用到的那些表格拖拽

第一種方式

1. npm install vuedraggable -S
2.組件註冊
import draggable from "vuedraggable";
export default {
 components: {
 draggable,
 } 
3。上全部代碼
<template>
 <div>
 <!--main-->
   <table class="dataTabble">
    <thead>
    <tr>
     <th width="110">欄目名稱</th>
     <th width="200">發佈時間</th>
     <th width="160">公告數量</th>
     <th width="160">操作</th>
    </tr>
    </thead>
    <draggable v-model="tablelist" element="tbody" :move="getdata" @update="datadragEnd">
    <tr v-for="(item,id) in tablelist" :key="id">
     <td>{{item.name}}</td>
     <td>{{item.time}}</td>
     <td>{{item.num}}</td>
     <td>
     <div class="tabopa">
      <a @click="dialogFormVisible = true" style="cursor:pointer">添加</a>
      <a @click="open2">刪除</a>
     </div>
     </td>
    </tr>
    </draggable>
   </table>
   <div class="zhu mt40">提示：拖動可對欄目進行排序</div>
 <!--main end-->
 </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
 components: {
 draggable,
 },
 data() {
 return {
  tablelist: [
  { id: 1, name: "活動消息1", time: "2018-08-25 14：54", num: "1000" },
  { id: 2, name: "公司消息2", time: "2018-08-25 14：54", num: "200" },
  { id: 3, name: "個人消息3", time: "2018-08-25 14：54", num: "30000" },
  { id: 4, name: "客戶消息4", time: "2018-08-25 14：54", num: "40" }
  ],
 };
 },
 methods: {
 //拖動中與拖動結束
 getdata(evt) {
  console.log(evt.draggedContext.element.id);
 },
 datadragEnd(evt) {
  console.log("拖動前的索引 :" + evt.oldIndex);
  console.log("拖動後的索引 :" + evt.newIndex);
  console.log(this.tags);
 },
 }
}
</script>
<style>
</style>

　　

第二種方式

npm install sortablejs --save

在main.js中引入註冊到Vue的根實例：import Sortable from 'sortablejs'


html部分
<el-table :data="tableData"
                      border
                      width="100%"
                      row-key="id"
                      align="left"
                      v-show="showDictItem">
                      <el-table-column width="50px">
                          <template slot-scope="scope">
                              <el-button type='text' v-show="scope.row.defaultValue === 1">默認</el-button>
                          </template>
                      </el-table-column>
                      <el-table-column
                          width="60px"
                          label="序號"
                          type="index">
                    </el-table-column>
                     <el-table-column v-for="(item, index) in col"
                        :key="`col_${index}`"
                        :prop="dropCol[index].prop"
                        :label="item.label"> 
                      </el-table-column>
                      <el-table-column label="操作" min-width="100">
                          <template slot-scope="scope">
                            <el-button
                              size="mini"
                              @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                              <el-popover placement="top" v-model="scope.row.visible">
                                  <p>確定要刪除當前內容？</p>
                                  <div style="text-align: right; margin: 0">
                                    <el-button size="mini" plain @click="scope.row.visible = false">取消</el-button>
                                    <el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row), scope.row.visible = false">確定</el-button>
                                  </div>
                                  <el-button
                                      size="mini"
                                      type="danger"
                                      slot="reference">刪除</el-button>
                              </el-popover>
                              
                            
                              <el-button
                              size="mini"
                              type="primary"
                              @click="handleDefault(scope.$index, scope.row)" v-show="scope.row.defaultValue === 0">默認</el-button>
                              <el-button
                              size="mini"
                              type="primary"
                              @click="handleDefault(scope.$index, scope.row)" v-show="scope.row.defaultValue === 1">取消</el-button>
                          </template>
                      </el-table-column>
                </el-table>

data部分
col: [
                    
                    {
                      label: '值',
                      prop: 'dataKey'
                    },
                    {
                      label: '顯示名',
                      prop: 'dataValue'
                    }
                  ],
                  dropCol: [
                      
                    {
                      label: '值',
                      prop: 'dataKey'
                    },
                    {
                      label: '顯示名',
                      prop: 'dataValue'
                    }
                  ],
                  tableData: [],

methods部分
//行拖拽
            rowDrop() {
              const tbody = document.querySelector('.el-table__body-wrapper tbody')
              const _this = this
              Sortable.create(tbody, {
                onEnd({ newIndex, oldIndex }) {
                  const currRow = _this.tableData.splice(oldIndex, 1)[0]
                  _this.tableData.splice(newIndex, 0, currRow)
                }
              })
            },
            //列拖拽
            columnDrop() {
              const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
              this.sortable = Sortable.create(wrapperTr, {
                animation: 180,
                delay: 0,
                onEnd: evt => {
                  const oldItem = this.dropCol[evt.oldIndex]
                  this.dropCol.splice(evt.oldIndex, 1)
                  this.dropCol.splice(evt.newIndex, 0, oldItem)
                }
              })
            },