vue+elementui+el-table实现表格拖拽（列和行）

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 部分

                      border
                      width="100%"
                      row-key="id"
                      align="left"
                      v-show="showDictItem">
                     
                         
                     
                                                width="60px"
                          label="序号"
                          type="index">
                   
                                              :key="`col_${index}`"
                        :prop="dropCol[index].prop"
                        :label="item.label"> 
                     
                     
                         
                     
               

 

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)
                }
              })
            },