element中使用sortablejs进行行列拖拽及封装

1、依赖 sortablejs 下载

npm install sortable.js --save

2、mounted中调用行列拖拽方法

  mounted() {
    this.rowDrop()
    this.columnDrop()
  },

行拖拽方法

 rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      Sortable.create(tbody, {
        animation: 150,
        ghostClass: 'blue-background-class',
        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) => {
          if (evt.oldIndex === evt.newIndex) return
          const oldItem = this.tableTitle[evt.oldIndex - 1]
          const newItem = this.tableTitle[evt.newIndex - 1]
          this.$set(this.tableTitle, evt.newIndex - 1, oldItem)
          this.$set(this.tableTitle, evt.oldIndex - 1, newItem)
        }
      })
    }

tableData：接口返回的表格数据
tableTitle：表头数据
列拖拽是索引-1是因为el-table中有固定表格选项一列

注意：el-table中需绑定row-key为唯一值

遍历显示el-table-column时绑定的key不能为固定索引，否则列拖动时会照成数据渲染有误（表头名称与表格内数据不一致）。可绑定为随机数 :key=“index+‘’+Math.random()”。

完整代码

<template>
  <div>
    <el-table :data="tableData" row-key="key1" border stripe>
      <el-table-column fixed="left" type="selection" width="55" />
      <template v-for="(item,index) in tableTitle">
        <el-table-column
          :key="index+''+Math.random()"
          align="center"
          :min-width="(item.title.length + 10 ) * 12"
          sortable="custom"
          :prop="item.key"
          :label="item.title"
        />
      </template>
    </el-table>
  </div>
</template>
<script>
import { getDosageTable } from '@/api/index.js'
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      tableTitle: [
        { title: '表头1', key: 'key1' },
        { title: '表头2', key: 'key2' },
        { title: '表头3', key: 'key3' }
      ],
      tableData: []
    }
  },
  mounted() {
    this.rowDrop()
    this.columnDrop()
  },
  created() {
    this.getTableDataFn()
  },
  methods: {
    getTableDataFn() {
      getDosageTable().then(res => {
        if (res.success) this.tableData = res.data
      })
    },
   // 行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      Sortable.create(tbody, {
        animation: 150,
        ghostClass: 'blue-background-class',
        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) => {
          if (evt.oldIndex === evt.newIndex) return
          const oldItem = this.tableTitle[evt.oldIndex - 1]
          const newItem = this.tableTitle[evt.newIndex - 1]
          this.$set(this.tableTitle, evt.newIndex - 1, oldItem)
          this.$set(this.tableTitle, evt.oldIndex - 1, newItem)
        }
      })
    }
  }
}
</script>

后续优化

项目中一般会有多处表格需要进行行列拖拽，此时可以将行列拖拽方法封装到混入文件中，减少代码量提高利用率。
引入及使用步骤
1、引入 import { sortablejs } from ‘@/mixins/commonUtils/sortablejs’
2、激活 mixins: [sortablejs]
3、初始化方法

    mounted() {
        this.$rowDrop()
        this.$columnDrop()
    },

4、table表格需设置 row-key属性，值唯一
5、el-table-column中key值动态绑定( :key=“${index}_${columnDropDataMixins}” )
完整封装方法如下：

import Sortable from 'sortablejs'
export const sortablejs = {
  data() {
    return {
      columnDropDataMixins: 0
    }
  },
  created() {
  },
  methods: {
    // 行拖拽
    $rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      Sortable.create(tbody, {
        animation: 150,
        ghostClass: 'blue-background-class',
        onEnd: ({ newIndex, oldIndex }) => {
          const currRow = this.tableData && this.tableData.splice(oldIndex, 1)[0]
          this.tableData && this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
    // 列拖拽
    $columnDrop(FixedColumn = 0) { // FixedColumn,table表格固定列数
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          if (evt.oldIndex === evt.newIndex) return
          const oldItem = this.tableTitle[evt.oldIndex - FixedColumn]
          const newItem = this.tableTitle[evt.newIndex - FixedColumn]
          this.$set(this.tableTitle, evt.newIndex - FixedColumn, oldItem)
          this.$set(this.tableTitle, evt.oldIndex - FixedColumn, newItem)
          this.columnDropDataMixins++ // 拖拽列后动态更新
        }
      })
    }
  }
}

sortablejs官网：http://www.sortablejs.com/