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>
相关推荐
昔人'15 分钟前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静6 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
saadiya~7 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
百锦再7 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
Sheldon一蓑烟雨任平生7 小时前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
瓜瓜怪兽亚8 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院8 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq7798233408 小时前
React组件完全指南
前端·javascript·react.js
EndingCoder9 小时前
MongoDB基础与Mongoose ODM
服务器·javascript·数据库·mongodb·中间件·node.js
qq7798233409 小时前
React Hooks完全指南
前端·javascript·react.js