<template>
    <q-page>
    <div class="q-pa-md">
      <q-table
        title="项目展示"
        :rows="rows"
        :columns="columns"
        row-key="name"
        v-model:pagination="pagination"
        hide-pagination
      />
      <div class="row justify-center q-mt-md">
        <q-pagination
          v-model="pagination.page"
          color="grey-8"
          :max="pagesNumber"
          size="sm"
        />
      </div>
    </div>
</q-page>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  
  const columns = [
    {
      name: 'desc',
      required: true,
      label: '项目名称',
      align: 'left',
      field: row => row.name,
      format: val => `${val}`,
    },
    { name: 'calories', align: 'center', label: '项目代码', field: 'calories'},
    { name: 'fat', label: '品类', field: 'fat'},
    { name: 'carbs', label: '产品剂型', field: 'carbs' },
    { name: 'protein', label: '工程师', field: 'protein' }
  ]
  
  const rows = [
    {
      name: 'Frozen Yogurt',
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0
    },
    {
      name: 'Ice cream sandwich',
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3
    },
    {
      name: 'Eclair',
      calories: 262,
      fat: 16.0,
      carbs: 23,
      protein: 6.0
    },
    {
      name: 'Cupcake',
      calories: 305,
      fat: 3.7,
      carbs: 67,
      protein: 4.3
    },
    {
      name: 'Gingerbread',
      calories: 356,
      fat: 16.0,
      carbs: 49,
      protein: 3.9
    },
    {
      name: 'Jelly bean',
      calories: 375,
      fat: 0.0,
      carbs: 94,
      protein: 0.0
    },
    {
      name: 'Lollipop',
      calories: 392,
      fat: 0.2,
      carbs: 98,
      protein: 0
    },
    {
      name: 'Honeycomb',
      calories: 408,
      fat: 3.2,
      carbs: 87,
      protein: 6.5
    },
    {
      name: 'Donut',
      calories: 452,
      fat: 25.0,
      carbs: 51,
      protein: 4.9
    },
    {
      name: 'KitKat1',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7
    },
    {
      name: 'KitKat2',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7
    },
    {
      name: 'KitKat3',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7
    },
    {
      name: 'KitKat4',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7
    },
    {
      name: 'KitKat5',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7
    },
    {
      name: 'KitKat6',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7
    },
    {
      name: 'KitKat7',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7
    },
    {
      name: 'KitKat8',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7
    },
    {
      name: 'KitKat9',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7
    },
    {
      name: 'KitKat10',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7
    },
    {
      name: 'KitKat11',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7
    },
    {
      name: 'KitKat12',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7
    },
    {
      name: 'KitKat13',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7
    }
  ]
  
      const pagination = ref({
        sortBy: 'desc',
        descending: false,
        page: 1,
        rowsPerPage: 10
        // rowsNumber: xx if getting data from a server
      })

const pagesNumber =  computed(() => Math.ceil(rows.length / pagination.value.rowsPerPage))
  </script>这段代码如何在table的每一行后面添加编辑和删除按钮