如何在Quasar Table的每一行添加动态按钮（不使用插槽）

需求：在不使用插槽的情况下，为Quasar Table的每一行添加按钮，通过现有列配置新增按钮列，点击按钮时能传递当前行的id。现有列配置及模板代码如下：

现有列配置：

const columns = [
 {
  name: 'name',
  required: true,
  label: 'Member No.',
  align: 'left',
  field: row => row.name,
  format: val => `${val}`,
  sortable: true
 },
 { name: 'short_name', align: 'left', label: 'Short Name', field: 'short_name', 
   sortable:true},
 { name: 'address', align: 'left', label: 'Address', field: 'address', sortable:true},
 { name: 'ward_count', align: 'left', label: 'Ward No', field: 'ward_count', sortable:true},
 { name: 'bed_count', align: 'left', label: 'Bed No', field: 'bed_count'},
 { name: 'entry_by', align: 'left', label: 'Entry By', field: 'entry_by'}
]

模板代码：

<q-table
  title="Treats"
  :rows="rows"
  :columns="columns"
  row-key="id"
  v-model:pagination="pagination"
  :loading="loading"
  :filter="filter"
  @request="onRequest"
  binary-state-sort
>
  <template v-slot:top-right>
    <q-input borderless dense debounce="300" v-model="filter" 
     placeholder="Search">
      <template v-slot:append>
        <q-icon name="search" />
      </template>
    </q-input>
  </template>

</q-table>

你可以通过在列配置中新增一列，并使用render函数渲染按钮组件，同时绑定点击事件传递当前行id，全程无需使用插槽。

步骤1：修改列配置，添加按钮列 #

在现有的columns数组末尾新增按钮列的配置，利用render函数生成带点击事件的按钮：

const columns = [
  {
    name: 'name',
    required: true,
    label: 'Member No.',
    align: 'left',
    field: row => row.name,
    format: val => `${val}`,
    sortable: true
  },
  { name: 'short_name', align: 'left', label: 'Short Name', field: 'short_name', sortable:true},
  { name: 'address', align: 'left', label: 'Address', field: 'address', sortable:true},
  { name: 'ward_count', align: 'left', label: 'Ward No', field: 'ward_count', sortable:true},
  { name: 'bed_count', align: 'left', label: 'Bed No', field: 'bed_count'},
  { name: 'entry_by', align: 'left', label: 'Entry By', field: 'entry_by'},
  // 新增操作按钮列
  {
    name: 'actions',
    label: '操作',
    align: 'center',
    // render函数接收createElement方法和当前行数据
    render: (h, { row }) => {
      return h('q-btn', {
        props: {
          size: 'sm',
          label: '查看',
          color: 'primary',
          flat: true
        },
        on: {
          // 点击时传入当前行id到处理函数
          click: () => handleRowAction(row.id)
        }
      })
    }
  }
]

步骤2：定义按钮点击处理函数 #

根据你的Vue写法（Options API或Composition API），定义对应的处理函数：

Options API 写法 #

methods: {
  handleRowAction(rowId) {
    // 这里编写点击后的业务逻辑，比如根据id查询详情
    console.log('当前行ID:', rowId)
    // 示例：openDetailModal(rowId)
  }
}

Composition API 写法（Vue3） #

// 在setup函数中定义
const handleRowAction = (rowId) => {
  console.log('当前行ID:', rowId)
  // 你的业务逻辑...
}

多按钮扩展示例 #

如果需要在同一列添加多个按钮，只需在render函数中返回一个容器组件包裹多个按钮：

{
  name: 'actions',
  label: '操作',
  align: 'center',
  render: (h, { row }) => {
    return h('div', { style: { display: 'flex', gap: '8px' } }, [
      h('q-btn', {
        props: { size: 'sm', label: '编辑', color: 'orange' },
        on: { click: () => editRow(row.id) }
      }),
      h('q-btn', {
        props: { size: 'sm', label: '删除', color: 'red' },
        on: { click: () => deleteRow(row.id) }
      })
    ])
  }
}

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