vue3实现quasar组件q-table表格每行最后一列为删除按钮

在Vue 3中，Quasar框架的`q-table`组件用于展示数据表，如果要在每一行的最后添加一个删除按钮，你可以这样做：

首先，确保已安装Quasar CLI并引入了`q-table`组件。然后，在你的组件模板部分（template），可以使用v-for指令遍历数据数组，并在每个条目的末尾插入删除按钮的HTML元素：

<template>
  <q-table
    :data="items"
    bordered
    striped
    dense
    header-row
    show-bottom-space
    @cell-click="handleCellClick"
  >
    <!-- 添加列定义 -->
    <q-tr key="tableRow" v-for="(item, index) in items">
      <q-td v-for="(columnData, colIndex) in columnDefs" :key="colIndex">
        {{ item[columnData.field] }}
        <!-- 行末删除按钮 -->
        <q-btn
          color="danger"
          tiny
          flat
          icon-only
          @click="$emit('deleteRow', index)"
          style="margin-left: auto; display: flex; align-items: center;"
        >
          <q-icon name="close-circle-o" />
        </q-btn>
      </q-td>
    </q-tr>
  </q-table>
</template>

<script setup>
import { ref } from 'vue';
import { useQuasar } from 'quasar/app';

const items = ref([]); // 数据源
const deleteRow = (index) => {
  // 根据业务逻辑处理删除操作
  items.value.splice(index, 1);
};

// 假设columnDefs是一个对象数组，存储你的列定义
const columnDefs = [
  // ... your column definitions
];

// 如果需要监听单元格点击事件
const handleCellClick = (event, cell) => {
  if (cell.columnDef.field === 'delete') {
    deleteRow(cell.row);
  }
};
</script>

这里的关键点包括：
- `@cell-click`事件监听单元格点击，判断是否是删除按钮所在列，如果是则触发删除操作。
- 使用`v-for`遍历数据和列定义。
- 删除按钮的`@click`事件绑定到删除方法，传递当前行索引。