Quasar 2 q-table 每行新增操作按钮实现咨询（Laravel + Vue3 技术栈）

• 第一步：在 q-table 的列配置中新增操作列定义
  在你的表格列配置数组里新增专门的操作列，设置不需要排序、固定对齐方式：

const columns = [
  // 你原有业务列的配置保留
  {
    name: 'actions',
    label: '操作',
    align: 'center',
    sortable: false,
    width: '120px' // 可根据按钮数量自行调整宽度
  }
]

• 第二步：通过 q-table 插槽自定义渲染操作按钮
  使用body-cell-[列名]插槽渲染编辑、删除按钮，直接获取当前行数据绑定对应事件：

<q-table
  :rows="tableData"
  :columns="columns"
  row-key="id"
>
  <!-- 自定义操作列渲染内容 -->
  <template #body-cell-actions="props">
    <q-btn-group flat dense>
      <q-btn 
        icon="edit" 
        color="primary"
        @click="handleEdit(props.row)"
      >
        <q-tooltip>编辑</q-tooltip>
      </q-btn>
      <q-btn 
        icon="delete" 
        color="negative"
        @click="handleDelete(props.row.id)"
      >
        <q-tooltip>删除</q-tooltip>
      </q-btn>
    </q-btn-group>
  </template>
</q-table>

如果需要显示文字按钮，删掉q-tooltip组件，给q-btn加label="编辑"/label="删除"属性即可。

• 第三步：编写操作逻辑对接 Laravel 后端接口

import { useQuasar } from 'quasar'
const $q = useQuasar()

// 编辑逻辑
const handleEdit = (row) => {
  // 将当前行数据赋值给编辑表单，弹出编辑模态框
  editForm.value = { ...row }
  editDialogVisible.value = true
}

// 提交编辑请求，对接 Laravel 资源更新接口
const submitEdit = async () => {
  await axios.put(`/api/你的业务资源路由/${editForm.value.id}`, editForm.value)
  // 提交成功后刷新表格数据
  fetchTableData()
  editDialogVisible.value = false
}

// 删除逻辑
const handleDelete = async (id) => {
  $q.dialog({
    title: '确认删除',
    message: '删除后数据无法恢复，是否继续操作？'
  }).onOk(async () => {
    await axios.delete(`/api/你的业务资源路由/${id}`)
    // 删除成功后刷新表格
    fetchTableData()
  })
}

内容的提问来源于stack exchange，提问作者Matthew Speicher