Element table 实现表格行、列拖拽功能

安装包

npm install sortablejs --save

javascript 复制代码
<template>
  <div class="draggable" style="padding: 20px">
    <el-table row-key="id" :data="tableData" style="width: 100%" border>
      <el-table-column
        v-for="(item, index) in oldList"
        :key="`col_${index}`"
        :prop="newList[index].prop"
        :label="item.label"
        align="center"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import Sortable from 'sortablejs'

export default {
  mounted () {
    this.oldList = JSON.parse(JSON.stringify(this.tableConfig.tableItems))
    this.newList = JSON.parse(JSON.stringify(this.tableConfig.tableItems))
    this.columnDrop()
    this.rowDrop()
  },
  data () {
    return {
      oldList: [],
      newList: [],
      tableData: [
        {
          id: 1,
          name: '李一',
          gender: '男',
          age: 30,
          job: '会计'
        },
        {
          id: 2,
          name: '王二',
          gender: '未知',
          age: 18,
          job: '无业游民'
        },
        {
          id: 3,
          name: '张三',
          gender: '男',
          age: 50,
          job: '老板'
        }
      ],
      tableConfig: {
        tableItems: [
          {
            label: '姓名',
            prop: 'name'
          },
          {
            label: '性别',
            prop: 'gender'
          },
          {
            label: '年龄',
            prop: 'age'
          },
          {
            label: '工作',
            prop: 'job'
          }
        ]
      }
    }
  },
  methods: {
    // 行拖拽
    rowDrop () {
      // 此时找到的元素是要拖拽元素的父容器
      const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        //  指定父元素下可被拖拽的子元素
        draggable: '.draggable .el-table__row',
        onEnd ({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
    // 列拖拽
    columnDrop () {
      const wrapperTr = document.querySelector('.draggable .el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const oldItem = this.newList[evt.oldIndex]
          this.newList.splice(evt.oldIndex, 1)
          this.newList.splice(evt.newIndex, 0, oldItem)
        }
      })
    }
  }
}
</script>
<style scoped></style>
相关推荐
艾小逗43 分钟前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
明似水4 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
HhhDreamof_5 小时前
云贝餐饮 最新 V3 独立连锁版 全开源 多端源码 VUE 可二开
前端·vue.js·开源
Simaoya5 小时前
【vue】【element-plus】 el-date-picker使用cell-class-name进行标记,type=year不生效解决方法
前端·javascript·vue.js
Dnn015 小时前
vue3+element-push 实现input框粘贴图片或文本,图片上传。
前端·javascript·vue.js
Nuyoah.6 小时前
《Vue3学习手记5》
前端·javascript·学习
曹牧6 小时前
Java 调用webservice接口输出xml自动转义
java·开发语言·javascript
天天扭码6 小时前
2025年了,npm 与 pnpm我们该如何选择
前端·javascript·npm
烛阴6 小时前
10个JavaScript编程技巧,助你成为高效开发高手!
前端·javascript