Vue中table实现行的上移和下移调用接口

在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: '当前行已经是最后一行，无法下移'})
    }
  })
})

以上是基本的实现思路，具体实现过程中需要根据实际业务进行调整。