VUE +element el-table運用sortable 拖拽table排序，實現行排序，列排序

Sortable.js是一款輕量級的拖放排序列表的js插件（雖然體積小，可是功能很強大）

 

項目需求是要求能對element中 的table進行拖拽行排序

這裏用到了sorttable 

Sortable.js是一款輕量級的拖放排序列表的js插件（雖然體積小，可是功能很強大）

官方Demo：http://rubaxa.github.io/Sortable/

 

安裝步驟：

npm install sortablejs --save

 

在.vue中的js部分（須要用到sorttable的vue文件中）引入  也能夠 在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: [],

methos

//行拖拽
 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) } }) },

這樣就能夠實現基本的行拖拽和列拖拽了