Quasar 框架 - VueJS

Question

我使用 VueJS 在 quasar 框架中编写了我的数据表。 这是我的代码。

<template>
  <div class="q-pa-md">
    <q-table
      title="Task List Of The Day"
      :columns="columns"
      row-key="name"
      :pagination="pagination"
    >
      <q-tr v-for="abs in absensi" v-bind:key="abs.id">
        <q-td>{{abs.project}}</q-td>
        <q-td>{{abs.activity}}</q-td>
        <q-td>{{abs.remaks}}</q-td>
        <q-td>
        <q-btn color="red" dense flat icon="eva-trash-2-outline" @click="deleteabs(index)" />
        </q-td>
      </q-tr>
    </q-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
    columns: [
       {
          name: 'project',
          align: 'left',
          label: 'Project',
          field: 'project',
          sortable: true
       },
       {
          name: 'activity',
          align: 'left',
          label: 'Activity',
          field: 'activity',
          sortable: true
       },
       {
          name: 'remaks',
          align: 'left',
          label: 'Remaks',
          field: 'remaks',
          sortable: true
       },
       {
          name: 'action',
          align: 'left',
          label: 'Action',
          field: 'action',
          sortable: true
       }
      ],
      absensi: [
        {
          project: 'bos',
          activity: 'dodo',
          remaks: 'bisa',
          action: ''
        }
      ]
    }
  }
}
</script>

但是当我运行代码时，行 (absensi) 不会被读取或出现在表中。我想要从我在脚本中有状态的absensi 获得的行的值。

结果如下： enter image description here

Answer 1

您需要定义数据道具。要显示的数据行（:data），您可以使用正文槽自定义表格的正文。您可以使用 __index 获取索引。

<q-table
          title="Task List Of The Day"
          :columns="test_columns"
          row-key="name"
          :pagination="pagination"
          :data="absensi"
        >
          <template slot="body" slot-scope="props">
            <q-tr :props="props">
              <q-td key="project" :props="props">{{ props.row.project }}</q-td>
              <q-td key="activity" :props="props">{{ props.row.activity }}</q-td>
              <q-td key="remaks" :props="props">{{ props.row.remaks }}</q-td>
              <q-td key="action" :props="props">
                index: {{props.row.__index}}
                <q-btn color="red" dense flat icon="eva-trash-2-outline" @click="deleteabs(props.row.__index)"/>
              </q-td>
            </q-tr>
          </template>
        </q-table>