vue 实现列表数据上移下移

最新推荐文章于 2024-03-29 14:19:17 发布

yiyiyiyi_

最新推荐文章于 2024-03-29 14:19:17 发布

阅读量722

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qiqiyiyi_/article/details/131598954

版权

表格行移动

封装列表移动方法

    // 列表行移动
    // order 上移/下移
    // ids 需要移动的行(数据)标识集合
    // id 行(数据)标识
    // list 列表数据集合
    moveRowsList(order, ids, id, list) {
   
        let newArr = [];
        newArr

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yiyiyiyi_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 实现列表数据上移下移

【代码】vue 实现列表数据上移下移。
复制链接

扫一扫

vue对数组元素的上移下移和置顶等操作

Harley567

02-13

1660

vue对数组元素的上移下移和置顶等操作

Vue中table实现行的上移和下移

飞翔的小白

01-05

2917

最上方的行不可以再向上移动：所以向上的按钮禁用，同理最下面的一行也是 html代码： <el-table-column label="操作" align="center" width="250px" fixed="right"> <template slot-scope="scope"> ..

参与评论您还未登录，请先登录后发表或查看评论

前端Vue根据List中的某个字段排序

热门推荐

晓风揽月

01-22

1万+

el-tabel 列表项实现上移，下移，删除功能结合Element组件，scope中有三个参数（row，cow，$index）分别表示行内容、列内容、以及此行索引值， table上绑定数组 :data=“newsList”。上移和下调两个按钮，并绑定上点击函数，将此行的索引值(scope.$index)作为参数： <template> <el-table ...

vue el-table实现行上移下移

qq_50917246的博客

06-26

656

el-table实现上下移动

vue2.0实现列表数据增加和删除

01-19

本文实例为大家分享了vue2.0实现列表数据增加和删除的具体代码，供大家参考，具体内容如下 css <style> [v-cloak]{ display: none; } table{ width: 800px; border-collapse: collapse; margin: 20px ...

vue实现城市列表选择功能

10-18

主要介绍了vue实现城市列表选择功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

Vue如何获取数据列表展示

10-15

下面将详细讲解如何在Vue中实现数据列表的获取与展示，以本例中从GitHub API获取Vue.js提交数据为例。 1. **数据绑定**：在Vue中，我们可以使用`v-for`指令来遍历数组并将其内容渲染到DOM中。例如，`...

vue实现列表滚动的过渡动画

11-20

本文实例为大家分享了Vue实现列表滚动过渡动画的具体代码，供大家参考，具体内容如下效果图失帧比较严重，在手机上效果更佳。原理分析这个滚动页面由两个部分布局（底部固定的Tab页面除外）。一个是顶部的...

vue置顶，置底，上移、下移

webhhhhhh的博客

10-20

211

vue删除数组中指定值方法一：for循环遍历找到下标，再根据下标删除值，如下图所示：其中checkArr为遍历的数组对象或数组，遍历出该数组中每一项，判断相等的值，如果相等就根据该下标找到checkArr里面的值，再用函数splice（i,1）找到checkArr里下标为i的值删除该项开始1个值 for(var i=0;i<checkArr.length;i++){ var item = checkArr[i]; if(data.id == item){ ch

vue获取上级数据的两个方法

qq_45505241的博客

11-06

1575

$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201106175650149.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTA1MjQx,size

教你一招，element表格行轻松上下移动

Shids_的博客

03-18

3689

教你一招，element表格行轻松上下移动

vue实现上移下移_Vue实现table上下移动功能示例

weixin_39713841的博客

12-19

702

本文实例讲述了Vue实现table上下移动功能。分享给大家供大家参考，具体如下：结合Element组件，scope中有三个参数(row，cow，$index)分别表示行内容、列内容、以及此行索引值，table上绑定数组 :data="tableList"添加一列，里面放上上移和下调两个按钮，并绑定上函数，将此行的索引值(scope.$index)作为参数，样式根据需求自己调整：直接使用下面这种方式...

几大排序算法+ kmp 的理解和代码实现

刘小雨的博客

11-22

757

vue做一个上移和下移，删除的li 功能

weixin_30299709的博客

06-04

683

效果图：思路就是冒泡原理，把数据放到一个空数组，对其进行排序, 单选框用到的是iview 。具体实现代码： <div v-for="item in singledLists" :key="item.index" > // 数组singledLists <Checkbox @on-change="checkSingle" :disa...

控制标签上移、下移、置顶、置底

bulongwind的专栏

04-22

2006

Examples .demo li{line-height: 30px;border-bottom: 1px solid #000;} .demo li a{padding: 0 20px;} 001 上移下移置顶置底 002 上移下移置顶置底 003 上移下移置顶置底 004 上移下移置顶置底 $(".demo").on('click', 'a', funct

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: '当前行已经是最后一行，无法下移'}) } }) }) ``` 以上是基本的实现思路，具体实现过程中需要根据实际业务进行调整。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交