当前位置： 首页 > news >正文

el-table拖拽表格

news 2025/6/28 8:17:02

1、拖拽插件安装

npm i -S vuedraggable
// vuedraggable依赖Sortable.js，我们可以直接引入Sortable使用Sortable的特性。
// vuedraggable是Sortable的一种加强，实现组件化的思想，可以结合Vue，使用起来更方便。

2、引入拖拽函数

import Sortable from 'sortablejs' //（1）引入拖拽函数mounted() {this.rowDrop() //（2）组件创建时执行拖拽方法},// （3）拖拽方法rowDrop() {// 要侦听拖拽响应的DOM对象console.log('---rowDrop(拖拽初始化)---')const el = document.querySelector('#table_count2 .el-table__body-wrapper tbody');const that = this;new Sortable(el, {animation: 150,handle: '.handle_drop', //class类名执行事件ghostClass: 'blue-background-class',// 结束拖拽后的回调函数onEnd({ newIndex, oldIndex }) {console.log(oldIndex, '----拖动到--->', newIndex)const tempList = [...that.tableData]/**splice 新增删除并以数组的形式返回删除内容；（此处表示获取删除项对象） */const currentRow = tempList.splice(oldIndex, 1)[0];tempList.splice(newIndex, 0, currentRow);/** 在新下标前添加一个数据， 第二个参数 0 表示不删除，即为新增 */console.log('---新数组---', tempList)that.tableData = [...tempList]}// onEnd: (evt) => {//     console.log('----onEnd(拖拽结束)---', evt)// },});},

3、el-table指定点拖拽（完整代码）

<template><div class="content"><el-table :data="tableData" id="table_count2" class="table-box" stripe border style="width: 100%;" size="mini"@selection-change="handleSelectionChange" row-key="id"><el-table-column type="selection" width="50" :reserve-selection="true" align="center"fixed="left"></el-table-column><el-table-column label="序号" align="center" width="50" fixed><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column><el-table-column prop="date" label="日期" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="address" label="地址" align="center" width="210"></el-table-column><el-table-column label="操作" width="150" align="center"><template slot-scope="scope"><el-tooltip content="复制" placement="top"><el-button type="success" plain circle size="mini"@click.stop="handleCopy(scope.row, scope.$index)"><i class="el-icon-box"></i></el-button></el-tooltip><el-tooltip content="删除" placement="top"><el-button type="danger" plain circle size="mini"@click.stop="handleDelete(scope.row, scope.$index)"><i class="el-icon-delete"></i></el-button></el-tooltip><el-tooltip class="item" effect="dark" content="长按拖动排序" placement="top"><el-button type="info" plain circle size="mini"><i class="el-icon-rank handle_drop" style="font-size: 14px;"></i></el-button></el-tooltip></template></el-table-column></el-table></div>
</template><script>
import Sortable from 'sortablejs' //（1）引入拖拽函数
export default {name: "TableBase3",components: {},data() {return {multipleSelection: [],//多选tableData: [{id: 1,date: '2016-05-01',name: '王小虎1',address: '上海市普陀区金沙江路 1510 弄'}, {id: 2,date: '2016-05-02',name: '王小虎2',address: '上海市普陀区金沙江路 1511 弄'}, {id: 3,date: '2016-05-03',name: '王小虎3',address: '上海市普陀区金沙江路 1512 弄'}, {id: 4,date: '2016-05-04',name: '王小虎4',address: '上海市普陀区金沙江路 1513 弄'}]}},created() { },mounted() {this.rowDrop() //（2）组件创建时执行拖拽方法},methods: {// （3）拖拽方法rowDrop() {// 要侦听拖拽响应的DOM对象console.log('---rowDrop(拖拽初始化)---')const el = document.querySelector('#table_count2 .el-table__body-wrapper tbody');const that = this;new Sortable(el, {animation: 150,handle: '.handle_drop', //class类名执行事件ghostClass: 'blue-background-class',// 结束拖拽后的回调函数onEnd({ newIndex, oldIndex }) {console.log(oldIndex, '----拖动到--->', newIndex)const tempList = [...that.tableData]/**splice 新增删除并以数组的形式返回删除内容；（此处表示获取删除项对象） */const currentRow = tempList.splice(oldIndex, 1)[0];tempList.splice(newIndex, 0, currentRow);/** 在新下标前添加一个数据， 第二个参数 0 表示不删除，即为新增 */console.log('---新数组---', tempList)that.tableData = [...tempList]}// onEnd: (evt) => {//     console.log('----onEnd(拖拽结束)---', evt)// },});},//多选handleSelectionChange(val) {console.log('----多选  multipleSelection---', val)this.multipleSelection = val;},//复制handleCopy(row, rowIndex) {let newList = [...this.tableData]let newRow = { ...row }newRow['id'] = newList.length + 1newRow['name'] = newRow['name'] + "-" + newList.length + 1newList.push(newRow)this.tableData = [...newList]},//删除handleDelete(row, rowIndex) {this.$modal.confirm('是否确认删除此项？', {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {this.tableData.splice(rowIndex, 1)}).catch(() => { });}},
};
</script><style  lang="scss" scoped>
::v-deep {/**el-table表格调整 start*/.el-table .el-table__header-wrapper th,.el-table .el-table__fixed-header-wrapper th {height: auto;padding: 2px 0;}.el-table--mini .el-table__cell {padding: 2px;flex: 1;}/**el-table表格调整 end */
}
</style>

4、el-table整行拖拽（完整代码）

<template><div class="content"><el-table :data="tableData" id="table_count"  class="table-box" stripe border style="width: 100%;" size="mini"@selection-change="handleSelectionChange" row-key="id"><el-table-column type="selection" width="50" :reserve-selection="true" align="center"fixed="left"></el-table-column><el-table-column label="序号" align="center" width="50" fixed><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column><el-table-column prop="date" label="日期" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="address" label="地址" align="center" width="210"></el-table-column><el-table-column label="操作" width="100" align="center" fixed="right"><template slot-scope="scope"><el-tooltip content="复制" placement="top"><el-button type="success" plain circle size="mini"@click.stop="handleCopy(scope.row, scope.$index)"><i class="el-icon-box"></i></el-button></el-tooltip><el-tooltip content="删除" placement="top"><el-button type="danger" plain circle size="mini"@click.stop="handleDelete(scope.row, scope.$index)"><i class="el-icon-delete"></i></el-button></el-tooltip></template></el-table-column></el-table></div>
</template><script>
import Sortable from 'sortablejs' //（1）引入拖拽函数
export default {name: "TableBase2",components: {},data() {return {multipleSelection: [],//多选tableData: [{id: 1,date: '2016-05-01',name: '王小虎1',address: '上海市普陀区金沙江路 1510 弄'}, {id: 2,date: '2016-05-02',name: '王小虎2',address: '上海市普陀区金沙江路 1511 弄'}, {id: 3,date: '2016-05-03',name: '王小虎3',address: '上海市普陀区金沙江路 1512 弄'}, {id: 4,date: '2016-05-04',name: '王小虎4',address: '上海市普陀区金沙江路 1513 弄'}]}},created() { },mounted() {this.rowDrop() //（2）组件创建时执行拖拽方法},methods: {// （3）拖拽方法rowDrop() {// 要侦听拖拽响应的DOM对象console.log('---rowDrop(拖拽初始化)---')const el = document.querySelector('#table_count .el-table__body-wrapper tbody');const that = this;Sortable.create(el, {// 结束拖拽后的回调函数onEnd({ newIndex, oldIndex }) {console.log(oldIndex, '----拖动到--->', newIndex)const tempList = [...that.tableData]/**splice 新增删除并以数组的形式返回删除内容；（此处表示获取删除项对象） */const currentRow = tempList.splice(oldIndex, 1)[0];tempList.splice(newIndex, 0, currentRow);/** 在新下标前添加一个数据， 第二个参数 0 表示不删除，即为新增 */console.log('---新数组---', tempList)that.tableData = [...tempList]}// onEnd: (evt) => {//     console.log('----onEnd(拖拽结束)---', evt)// },})},//多选handleSelectionChange(val) {console.log('----多选  multipleSelection---', val)this.multipleSelection = val;},//复制handleCopy(row, rowIndex) {let newList = [...this.tableData]let newRow = { ...row }newRow['id'] = newList.length + 1newRow['name'] = newRow['name'] +"-"+ newList.length + 1newList.push(newRow)this.tableData = [...newList]},//删除handleDelete(row, rowIndex) {this.$modal.confirm('是否确认删除此项？', {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {this.tableData.splice(rowIndex, 1)}).catch(() => { });}},
};
</script><style  lang="scss" scoped>
::v-deep {/**el-table表格调整 start*/.el-table .el-table__header-wrapper th,.el-table .el-table__fixed-header-wrapper th {height: auto;padding: 2px 0;}.el-table--mini .el-table__cell {padding: 2px;flex: 1;}/**el-table表格调整 end */
}
</style>

5、自定义ul li 行拖拽(完整代码--复制即用)

<template><div class="content"><ul id="table_count2"><!-- 注意 key必须是唯一的id, 如果用index就可能导致渲染错误问题 --><li class="table_li" v-for="(item,index) in tableData" :key="'tli_'+item.id">         <span>{{ item.name  }}</span><i class="el-icon-rank handle_drop" style="font-size: 14px;"></i></li></ul></div>
</template><script>
import Sortable from 'sortablejs' //（1）引入拖拽函数
export default {name: "TableBase3",components: {},data() {return {tableData: [{id: 1,date: '2016-05-01',name: '王小虎1',address: '上海市普陀区金沙江路 1510 弄'}, {id: 2,date: '2016-05-02',name: '王小虎2',address: '上海市普陀区金沙江路 1511 弄'}, {id: 3,date: '2016-05-03',name: '王小虎3',address: '上海市普陀区金沙江路 1512 弄'}, {id: 4,date: '2016-05-04',name: '王小虎4',address: '上海市普陀区金沙江路 1513 弄'}]}},created() { },mounted() {this.rowDrop() //（2）组件创建时执行拖拽方法},methods: {// （3）拖拽方法rowDrop() {// 要侦听拖拽响应的DOM对象console.log('---rowDrop(拖拽初始化)---')const el = document.querySelector('#table_count2');const that = this;new Sortable(el, {animation: 150,handle: '.handle_drop', //class类名执行事件ghostClass: 'blue-background-class',// 结束拖拽后的回调函数onEnd({ newIndex, oldIndex }) {console.log(oldIndex, '----拖动到--->', newIndex)const tempList = [...that.tableData]/**splice 新增删除并以数组的形式返回删除内容；（此处表示获取删除项对象） */const currentRow = tempList.splice(oldIndex, 1)[0];tempList.splice(newIndex, 0, currentRow);/** 在新下标前添加一个数据， 第二个参数 0 表示不删除，即为新增 */console.log('---新数组---', tempList)that.tableData = [...tempList]}// onEnd: (evt) => {//     console.log('----onEnd(拖拽结束)---', evt)// },});},},
};
</script><style  lang="scss" scoped>.table_li{width: 500px;padding: 10px;border: 1px solid orange;border-radius: 5px;margin-bottom: 20px;display: flex;align-items: center;justify-content: space-between;
}
</style>
  • 相关文档：Element UI table表格行拖动排序_element表格拖拽改变顺序-CSDN博客

http://www.lryc.cn/news/517423.html

相关文章：

  • 如何轻松反转C# List＜T＞中的元素顺序
  • Transformer中Self-Attention以及Multi-Head Attention模块详解（附pytorch实现）
  • 在Nvidia Jetson ADX Orin中使用TensorRT-LLM运行llama3-8b
  • 六十一：HTTP/2的问题及HTTP/3的意义
  • IOS开发如何从入门进阶到高级
  • 非一般的小数：小数的概念新解、小数分类、浮点数的存储
  • 关于游戏销量的思考
  • JuiceFS 详解：一款为云原生设计的高性能分布式文件系统
  • 百度Android面试题及参考答案 （下）
  • RK3588+FPGA全国产异步LED显示屏控制卡/屏幕拼接解决方案
  • Elasticsearch：Query rules 疑难解答
  • 四、VSCODE 使用GIT插件
  • 键盘鼠标共享工具Barrier(kail与windows操作系统)
  • QTcpSocket 中设置接收缓冲区大小
  • Arduino IDE刷微控制器并下载对应固件的原由
  • Jurgen提出的Highway Networks：LSTM时间维方法应用到深度维
  • Netron可视化深度学习的模型框架，大大降低了大模型的学习门槛
  • Android客制化------7.0设置壁纸存在的一些问题
  • VuePress2配置unocss的闭坑指南
  • 海陵HLK-TX510人脸识别模块 stm32使用
  • 安卓14无法安装应用解决历程
  • 【Linux】传输层协议UDP
  • 玩机搞机基本常识-------列举安卓机型一些不常用的adb联机命令
  • unity学习14：unity里的C#脚本的几个基本生命周期方法, 脚本次序order等
  • pytorch 比较两个张量的是否相等的函数介绍
  • MySQL Windows 11 的 MySQL 配置文件 (my.ini) 路径查找指南
  • 06-RabbitMQ基础
  • 关于markdown实现页面跳转（调查测试：csdn（博客编写效果、发布效果）、typroa中md转pdf的使用情况）
  • el-dialog 组件 在＜style lang=“scss“ scoped＞标签
  • 《深度学习梯度消失问题：原因与解决之道》