vue+element-ui+sortable.js实现表格拖拽功能

下面是“vue+element-ui+sortable.js实现表格拖拽功能”的完整攻略：

需要使用的框架或插件

• vue.js
• element-ui
• sortable.js

实现步骤

1. 安装依赖

npm install vue-element-ui sortablejs --save

2. 引入依赖

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Sortable from 'sortablejs'

Vue.use(ElementUI)
Vue.prototype.$Sortable = Sortable  // 注册Sortable为Vue的全局指令

3. 实现表格拖拽

HTML结构

<template>
  <div>
    <el-table :data="tableData" ref="table" @sort-change="handleSortChange">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

JS代码

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京' },
        { name: '李四', age: 23, address: '上海' },
        { name: '王五', age: 32, address: '广州' },
        { name: '赵六', age: 45, address: '深圳' },
      ]
    }
  },
  mounted() {
    const el = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
    this.$Sortable.create(el, {
      // options
      onEnd: evt => {
        // 拖拽结束后更新数据
        const oldIndex = evt.oldIndex
        const newIndex = evt.newIndex
        const item = this.tableData.splice(oldIndex, 1)[0]
        this.tableData.splice(newIndex, 0, item)
      }
    })
  },
  methods: {
    handleSortChange({ oldIndex, newIndex }) {
      // ElementUI的sort-change事件需要删除，否则拖拽会发生两次
      this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody').addEventListener('dragover', e => e.preventDefault())
      this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody').removeEventListener('drop', this.handleSortChange)

      // ElementUI的sort-change事件会导致表格数据重排，需改为在Sortable的onEnd回调中更新表格数据
      const item = this.tableData.splice(oldIndex, 1)[0]
      this.tableData.splice(newIndex, 0, item)
    }
  }
}

示例说明

示例1：禁用弹出编辑框和排序功能

在实际业务中可能会遇到需要禁用表格拖拽或编辑功能的情况，可以通过给表格添加class或props属性来实现。

<template>
  <div>
    <el-table
      :data="tableData"
      ref="table"
      class="table-noninteractive"  <!-- 禁用表格拖拽 -->
      :show-header="false"  <!-- 禁用表格排序 -->
    >
      <!-- ... -->
    </el-table>
  </div>
</template>

/* 禁用表格样式 */
.table-noninteractive td { pointer-events: none; }
.table-noninteractive .el-table__header-wrapper th { pointer-events: none; }

示例2：禁用单行排序

有时候不希望表格中的某些行可以排序，可以通过v-for的index属性来实现。

<template>
  <div>
    <el-table :data="tableData" ref="table">
      <el-table-column v-for="(item, index) in tableData" :key="item.id" :label="item.name">
        <template v-slot="scope">
          <span v-if="index === 0">{{ scope.row.age }}</span>
          <span v-else>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 18, address: '北京', sortable: true },
        { id: 2, name: '李四', age: 23, address: '上海', sortable: false },
        { id: 3, name: '王五', age: 32, address: '广州', sortable: true },
        { id: 4, name: '赵六', age: 45, address: '深圳', sortable: true },
      ]
    }
  },
  mounted() {
    const el = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
    this.$Sortable.create(el, {
      // options
      onEnd: evt => {
        const oldIndex = evt.oldIndex
        const newIndex = evt.newIndex
        const item = this.tableData.splice(oldIndex, 1)[0]

        // 如果当前行的sortable属性为false，则不允许排序
        if (this.tableData[newIndex].sortable) {
          this.tableData.splice(newIndex, 0, item)
        } else {
          this.tableData.splice(oldIndex, 0, item)
        }
      }
    })
  }
}