vue3中实现elementPlus表格选中行的上移下移并保持移动行在可视区

已于 2024-03-11 11:07:09 修改
阅读量1.1k 收藏 12
点赞数 10
分类专栏： ❤️❤️--vue3核心技术栈 文章标签： vue.js vue3实现表格行的上移下移 el-table elementui
于 2024-02-29 11:19:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579104/article/details/136365719
版权

先看效果（可以实现上移下移，也可保留选中行一直在可视区域）：

实现步骤：

1、给el-table添加current-change事件、高亮属性及ref属性

 

2、给上移下移按钮添加事件

了解本专栏 订阅专栏 解锁全文 超级会员免费看
suoh's Blog
关注
  • 10
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
vue表格某一条数据上移、下移的2种思路
qq_33911541的博客
07-07 1466
vue表格某一条数据上移、下移的2种思路
vue3+elementPlus后台管理系统
08-19
综上所述，Vue3 + ElementPlus后台管理系统结合了Vue3的新特性和ElementPlus的组件库，配合Axios进行数据交互，使用Echarts进行数据可视化，以及富文本编辑器满足内容编辑需求，构建出一个高效、功能完善的管理平台...
Vue2，vue3 用element ui 做el-table表格行的上移和下移
感谢您阅读我的博客，如果您有任何问题或建议，请随时联系我。
03-07 2178
后台管理系统常用点击上移或下移按钮对当前行进关联操作，如果是表格第一行则不能上移，如果是表格的最后一行，则不能进行下移，不名思意就是禁用~
Vue中table实现行的上移和下移
飞翔的小白
01-05 2947
最上方的行不可以再向上移动：所以向上的按钮禁用，同理最下面的一行也是 html代码： <el-table-column label="操作" align="center" width="250px" fixed="right"> <template slot-scope="scope"> ..
Element table 上下拖动移动，需求不简单
最新发布
情义的博客
05-14 1190
Element table 上下移动，听起来是不是很简单的需求，产品的描述也简单：表格数据支持拖动上下移，支持通过选择表格行数据点击按钮上下移。最终效果大概如下(模拟数据共7条，去除了关联的业务操作)
vue el-table 多选列表上移、下移
weixin_42772271的博客
05-11 1034
vue多选列表上移下移修改列表顺序
vue3 antd table表格上移、下移、添加、删除
m0_66698608的博客
08-07 912
antd table 表格
vue3基于el-table数据的上移，下移
Zhouyuding_yyds的博客
12-02 689
el-table的上下移动
element-plus表格上下键滚动
D030923的博客
09-11 294
【代码】element-plus表格上下键滚动。
Vue3+element-plus 表格实现上移下移排序
A_9888的博客
02-18 1526
<!-- * @Description: * @Author: Ran junlin * @Date: 2022-02-18 10:16:09 * @LastEditTime: 2022-02-18 14:48:10 * @LastEditors: Ran junlin --> <template> <el-page-header content="生成试卷" @back="goBack" /> <el-divider></el-di
vue实现在表格里,取每行的id的方法
08-27
在Vue.js中，实现从表格中获取每行ID的功能是一个常见的需求，这通常涉及到数据绑定和事件处理。Vue提供了一种高效且灵活的方式来处理这样的场景。以下是一个详细的步骤和相关知识点解析： 1. **数据绑定**： Vue...
基于vue3+elementPlus的后台管理系统模板实现
03-03
在基于Vue3+ElementPlus的后台管理系统模板实现中，以下几个核心知识点是必须要掌握的： 1. **Vue3的Composition API**：Vue3引入了Composition API，它允许开发者在任何组件内组合使用功能逻辑，提高了代码复用和...
Vue+Element实现表格编辑、删除、以及新增行的最优方法
10-16
在Vue和Element UI框架下，实现表格的编辑、删除和新增行是常见的需求。这篇文章将介绍一种优化后的最佳实践，旨在提高代码效率和用户体验。在传统的实现方式中，可能需要通过双击单元格来激活编辑模式，而这里我们...
前端基于VUE+ElementUI实现table行上移或下移(支持跨页移动)
01-30 1353
table列表需要支持上下移动数据，并且也需要满足跨页移动。
教你一招，element表格行轻松上下移动
Shids_的博客
03-18 3736
教你一招，element表格行轻松上下移动
elementUI 表格多行上移下移、单行移动、拖拽移动（行，列）
qq_36958916的博客
02-07 5977
elementUI 表格多行上移下移、单行移动、拖拽移动（行，列）
vue+element table 上移下移功能实现
Missying55的博客
02-29 2136
上移： table 里列的 template里按钮 <el-button size="mini" type="text" @click="handleUp(scope.$index, scope.row)">上移</el-button> <el-button size="mini" type="text" @click="handleDown(scope.$index...
vue js 表格选中多条数据批量上移下移
weixin_45580655的博客
03-17 1299
批量上移 //选中行数据 let arrChecked = this.tableDataChecked; //表格数据 let arr = c //倒序遍历，保证移动完成的数据在下一次循环时位置不会再变动 a: for (let index1 = arrChecked.length - 1; index1 >= 0; index1--) { b: for (let index2 = arr.length - 1; index2 >= 0; index2-
Vue中table实现行的上移和下移调用接口
05-27
在Vue中实现table行的上移和下移，需要先在表格中添加对应的操作按钮，然后在点击按钮时调用接口进行数据的上移或下移操作。具体实现步骤如下： 1. 在表格中添加上移和下移按钮，可使用element-ui中的按钮组件： ``` <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" icon="el-icon-arrow-up" @click="handleMoveUp(scope.row)">上移</el-button> <el-button type="text" icon="el-icon-arrow-down" @click="handleMoveDown(scope.row)">下移</el-button> </template> </el-table-column> ``` 2. 在methods中定义handleMoveUp和handleMoveDown方法，分别调用接口进行数据上移和下移操作： ``` methods: { // 上移操作 handleMoveUp(row) { const index = this.tableData.indexOf(row) if (index > 0) { // 调用上移接口 this.$axios.post('/api/moveUp', {id: row.id}).then(res => { this.tableData.splice(index, 1) this.tableData.splice(index - 1, 0, row) }) } }, // 下移操作 handleMoveDown(row) { const index = this.tableData.indexOf(row) if (index < this.tableData.length - 1) { // 调用下移接口 this.$axios.post('/api/moveDown', {id: row.id}).then(res => { this.tableData.splice(index, 1) this.tableData.splice(index + 1, 0, row) }) } } } ``` 3. 在接口中实现数据上移和下移操作，可使用数据库中的排序字段进行排序： ``` // 上移接口 app.post('/api/moveUp', (req, res) => { const id = req.body.id // 查询当前行和前一行的数据 const sql = `SELECT *, (SELECT sort FROM table WHERE id = ${id-1}) AS prevSort FROM table WHERE id = ${id}` connection.query(sql, (err, results) => { if (err) throw err // 如果当前行不是第一行，则进行上移操作 if (results[0].prevSort) { const prevSort = results[0].prevSort const currSort = results[0].sort // 交换当前行和前一行的排序字段 const sql1 = `UPDATE table SET sort = ${prevSort} WHERE id = ${id}` const sql2 = `UPDATE table SET sort = ${currSort} WHERE id = ${id-1}` connection.query(sql1, (err, results) => { if (err) throw err connection.query(sql2, (err, results) => { if (err) throw err res.json({code: 0, message: '移动成功'}) }) }) } else { res.json({code: -1, message: '当前行已经是第一行，无法上移'}) } }) }) // 下移接口 app.post('/api/moveDown', (req, res) => { const id = req.body.id // 查询当前行和后一行的数据 const sql = `SELECT *, (SELECT sort FROM table WHERE id = ${id+1}) AS nextSort FROM table WHERE id = ${id}` connection.query(sql, (err, results) => { if (err) throw err // 如果当前行不是最后一行，则进行下移操作 if (results[0].nextSort) { const nextSort = results[0].nextSort const currSort = results[0].sort // 交换当前行和后一行的排序字段 const sql1 = `UPDATE table SET sort = ${nextSort} WHERE id = ${id}` const sql2 = `UPDATE table SET sort = ${currSort} WHERE id = ${id+1}` connection.query(sql1, (err, results) => { if (err) throw err connection.query(sql2, (err, results) => { if (err) throw err res.json({code: 0, message: '移动成功'}) }) }) } else { res.json({code: -1, message: '当前行已经是最后一行，无法下移'}) } }) }) ``` 以上是基本的实现思路，具体实现过程中需要根据实际业务进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suoh's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值