table表格中数据点击,数据上移,数据下移功能

其实就是两条数据互换位置,上移就是当前条跟上一条互换位置,下移就是当前条和下一条互换位置。

 

// table数据上移
export function moveUpTable(tableData, index) {
  if (index === 0) {
    // 数据已经置顶
  } else {
    tableData.splice(index - 1, 1, ...tableData.splice(index, 1, tableData[index - 1]))
  }
}
// table数据下移
export function moveDownTable(tableData, index) {
  if (index === tableData.length - 1) {
    // 数据已经置底
  } else {
    tableData.splice(index + 1, 1, ...tableData.splice(index, 1, tableData[index + 1]))
  }
}

tableData是表格的数据,index为当前条索引。

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
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
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值