Vue3+quasar的table表格的增删改查

Vue3 结合 Quasar UI 框架创建表格并实现增删改查功能通常涉及以下几个步骤：

1. 安装依赖：
首先确保已安装 Vue3 和 Quasar CLI，然后安装 `quasar-admin` 或者直接使用 `quasar表格组件`。

npm install quasar@latest @quasar/app quasar-admin 或者 quasar-v-stepper @quasar/extras @vue/cli-plugin-quasar

2. 创建表格组件：
在 Quasar 的项目中创建一个新的 Vue 组件，比如 `Table.vue`，用于展示数据表格。

<template>
  <q-table :data="items" :columns="columns">
    <!-- 添加操作列 -->
    <q-tr slot-scope="props" tag="template">
      <q-td class="actions">
        <q-btn icon round color="primary" @click="edit(props.row)" :title="`编辑 ${props.row.title}`" small>
          <i class="fas fa-edit"></i>
        </q-btn>
        <q-btn icon round color="danger" @click="deleteItem(props.row)" :title="`删除 ${props.row.title}`" small>
          <i class="fas fa-trash-alt"></i>
        </q-btn>
      </q-td>
    </q-tr>
  </q-table>
</template>

<script>
import axios from 'axios';

export default {
  props: ['items', 'columns'],
  methods: {
    edit(item) {
      // 跳转到编辑页面或者显示模态框，传递item数据
    },
    deleteItem(item) {
      // 发送请求删除数据，可以使用axios或其他HTTP库
      axios.delete('/api/items/' + item.id).then(() => {
        this.items = this.items.filter(i => i.id !== item.id);
      });
    }
  }
}
</script>

3. 管理状态：
在父组件或者其他适当的地方管理表格的数据(`items`)和列(`columns`)。例如，通过Vuex进行状态管理，或直接在父组件中处理。

4. 表单验证和提交：
对于表单中的修改操作，你可以使用 Quasar 的表单验证，并在提交时保存更新后的数据。

5. 功能添加：
- 新增：提供一个“添加”按钮，跳转到新的表单页面让用户输入新数据，然后将数据发送到服务器。
- 查询、过滤和分页：可以根据需要添加搜索框和分页组件，利用 Quasar 的内置特性。