vue中 el-table 实现拖拽排序教程

el-table基础上如何实现表格上下拖拽排序

element ui 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。

实现步骤：

1.安装Sortable.js

npm install --save sortablejs

2.在当前vue中JS代码中引入：

import Sortable from ‘sortablejs’

3.在当前vue文件template el-table中指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。
注意：需要注意的是element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。 row-key不可用index，因为拖拽后index会变，会有问题。

<el-table
          ref="table"
          :data="apiObj"
          row-key="id"
          @selection-change="selectionChange"
          :paginationLayout="'prev, pager, next'"
        >

项目完整代码：

<template>
  <div class="dic-data">
    <el-container>
      <el-header>
         <el-button type="primary" @click="saveSortData(apiObjDrag)"
              >排序保存</el-button
            >
      </el-header>
      <el-main class="nopadding">
        <el-table
           stripe
          ref="table"
          :data="apiObj"
          row-key="id"
          @selection-change="selectionChange"
          :paginationLayout="'prev, pager, next'"
        >
          <el-table-column
            label="序号"
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column
            label="字典键"
            prop="dictKey"
            align="left"
          ></el-table-column>
          <el-table-column
            label="字典值"
            prop="dictValue"
            align="left"
          ></el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import Sortable from 'sortablejs'

export default {
  name: 'data',
  data() {
    return {
      dialog: {
        new: false,
      },
      apiObj: [
        {
          dictKey:'你好',
          dictValue:'aa'
        },
        {
          dictKey:'我好',
          dictValue:'bb'
        },
        {
          dictKey:'他好',
          dictValue:'cc'
        }
      ],
      apiObjDrag: [],
    }
  },
  created() {
    // this.getDictDatalist()
    this.$nextTick(() => {
      this.rowDrop()
    })
  },
  methods: {
    // 项目中表格的数据是从接口来的，现在直接卸载data的apiObj了
    // async getDictDatalist() {
    //   const tempData = {
    //     dictType: this.dictType,
    //   }
    //   const res = await this.$API.system.dict.data.list.post(tempData)
    //   this.apiObj = res.data
    // },
    
    //行-拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.apiObj.splice(oldIndex, 1)[0]
          _this.apiObj.splice(newIndex, 0, currRow)
          //   拖动后获取newIdex
          let arr = Array.from(_this.apiObj)
          _this.apiObjDrag = arr.map((item, index) => {
            return {
              id: item.id,
              dictSort: index,
            }
          })
        },
      })
    },
    // 排序后，把拖动后的结果穿啊给后端
    async saveSortData(apiObjDrag) {
      if (apiObjDrag == '') {
        // this.$message.warning("请先拖动字典数据，再点击");
        return
      }
      const res = await this.$API.system.dict.data.sort.post(apiObjDrag)
      if (res.code == '2000') {
        this.$message.success('排序成功')
      } else {
        this.$alert(res.msg, '提示', { type: 'error' })
      }
    },
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection
    },
  },
}
</script>