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

第一种方式

1. npm install vuedraggable -S
2.组件注册
import draggable from "vuedraggable";
export default {
 components: {
 draggable,
 } 
3。上全部代码

第二种方式

npm install sortablejs --save

在main.js中引入注册到Vue的根实例：import Sortable from 'sortablejs'


html部分

                      
                          
                      
                      
                    
                      
                      
                      
                          
                      
                

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