Vue.js中vue-good-table如何将行ID传递至Laravel控制器

嗨，很高兴能帮到你！既然你已经能通过console.log拿到表格行的ID了，接下来把它传给Laravel控制器执行PUT/DELETE请求其实很简单，我分步骤给你说明：

第一步：配置Laravel路由 #

首先要在Laravel的路由文件里定义对应的PUT（更新）和DELETE（删除）路由，比如在routes/web.php或者routes/api.php中添加：

// 更新部门（PUT请求）
Route::put('/departments/{id}', [App\Http\Controllers\DepartmentController::class, 'update']);

// 删除部门（DELETE请求）
Route::delete('/departments/{id}', [App\Http\Controllers\DepartmentController::class, 'destroy']);

第二步：修改Vue组件的模板与方法 #

你可以把原来的fetch方法拆分成更清晰的editRow和deleteRow方法，同时调整模板里的按钮绑定：

模板部分 #

<vue-good-table styleClass="vgt-table striped bordered condensed" ....>
  <template slot="table-row" slot-scope="props">
    <span v-if="props.column.field == 'before'">
      <button class="btn btn-primary btn-block mr-2" @click="editRow(props.row.id)">Edit</button>
      <button class="btn btn-danger btn-block" @click="deleteRow(props.row.id)">Delete</button>
    </span>
  </template>
</vue-good-table>

脚本部分 #

这里我们用axios来发送HTTP请求（如果你的项目还没安装axios，可以先执行npm install axios）：

<script>
import axios from 'axios';

export default {
  // 你的其他组件配置，比如data、mounted等
  data() {
    return {
      // 假设你有存储编辑数据的变量
      departmentName: ''
    }
  },
  methods: {
    // 发送PUT请求更新部门
    async editRow(departmentId) {
      try {
        // 这里替换成你实际要提交的表单数据
        const updateData = {
          name: this.departmentName,
          // 其他需要更新的字段...
        };

        // 发送PUT请求，把ID拼在URL里
        const response = await axios.put(`/departments/${departmentId}`, updateData);
        console.log('更新成功:', response.data);
        // 更新成功后可以刷新表格数据，比如调用获取列表的方法
      } catch (error) {
        console.error('更新失败:', error.response.data);
        // 这里可以添加错误提示，比如弹出toast提醒用户
      }
    },

    // 发送DELETE请求删除部门
    async deleteRow(departmentId) {
      // 先给用户一个确认提示，防止误操作
      if (confirm('确定要删除这个部门吗？')) {
        try {
          const response = await axios.delete(`/departments/${departmentId}`);
          console.log('删除成功:', response.data);
          // 删除后同样刷新表格数据
        } catch (error) {
          console.error('删除失败:', error.response.data);
        }
      }
    }
  }
}
</script>

第三步：编写Laravel控制器方法 #

在DepartmentController里实现update和destroy方法来处理请求：

namespace App\Http\Controllers;

use App\Models\Department;
use Illuminate\Http\Request;

class DepartmentController extends Controller
{
    // 处理部门更新请求
    public function update(Request $request, $id)
    {
        // 先验证提交的数据是否合法
        $validatedData = $request->validate([
            'name' => 'required|string|max:255',
            // 添加其他字段的验证规则
        ]);

        // 找到对应的部门并更新
        $department = Department::findOrFail($id);
        $department->update($validatedData);

        // 返回JSON响应给前端
        return response()->json([
            'message' => '部门更新成功',
            'data' => $department
        ]);
    }

    // 处理部门删除请求
    public function destroy($id)
    {
        $department = Department::findOrFail($id);
        $department->delete();

        return response()->json(['message' => '部门删除成功']);
    }
}

注意事项 #

• CSRF保护：如果使用的是web路由，要确保axios请求携带CSRF令牌。可以在项目的入口JS文件（比如resources/js/app.js）里添加：

  axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content;
  

• API路由认证：如果用的是api路由，需要配置API认证（比如Laravel Sanctum），确保请求是授权的。

这样就能顺利把表格行的ID传递给Laravel控制器，完成PUT和DELETE请求啦！

内容的提问来源于stack exchange，提问作者Jim E Russel