element+Sortable实现表格拖拽

关注

原创最新推荐文章于 2026-08-27 15:31:57 发布 704 阅读 AI 写同款· GEO 优化 ›

Element-ui el-table 使用 SortableJS 实现表格拖拽排序，并将排序结果更新到数据库使数据行顺序修改前言当我们使用 Element el-table 组件时，需要用到拖拽排序的需求时，虽然 el-table 自带支持按列排序，但是当我们自己拖拽进行排序时，现有组件是无法满足的。这个时候我们就需要引入一个强大的js拖拽库：SortableJS 该拖拽库简单易上手，官网提供了我们常用的拖拽效果的demo，下面我主要记录一下如何在我们的项目中快速上手使用。一、安装安装方式分为三种： 1、npm 安装 npm install sortablejs --save 2、bower 安装 bower inst 阅读详情

1.先安装sortablejs

<template>
  <el-table :data="Data" align="left">
    <el-table-column v-for="(item, index) in Table" :key="index" :prop="dropCol[index].prop" :label="item.label"> 
      <template slot-scope="scope">
        <el-button v-if="dropCol[index].prop=='companyname'" type="text" size="medium">{{scope.row[dropCol[index].prop]}}</el-button>
        <span v-else>{{scope.row[dropCol[index].prop]}}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      Table: [
        {
          label: '公司名称',
          prop: 'companyname'
        },
        {
          label: 'global_id',
          prop: 'global_id'
        },
        {
          label: '省',
          prop: 'address'
        }
      ],
      dropCol: [
        {
          label: '公司名称',
          prop: 'companyname'
        },
        {
          label: 'global_id',
          prop: 'global_id'
        },
        {
          label: '省',
          prop: 'address'
        }
      ],
      Data: [
        {
          id: '1',
          companyname: '公司名称1',
          global_id: '2606615561',
          address: '广东'
        },
        {
          id: '2',
          companyname: '公司名称1',
          global_id: '2594631498',
          address: '浙江'
        },
        {
          id: '3',
          companyname: '公司名称1',
          global_id: '2586480635',
          address: '浙江'
        },
      ]
    }
  },
  mounted() {
    this.rowDrop()
    this.columnDrop()
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.Data.splice(oldIndex, 1)[0]
          _this.Data.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)
        }
      })
    }
  }
}
</script>

收录于