Квазар-каркас - VueJS - PullRequest
Новая
       16

Квазар-каркас - VueJS

0 голосов
/ 21 октября 2019

У меня есть код моей таблицы данных в квазар-структуре с использованием VueJS. Это мой код. 

<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, указывало, что у меня есть состояние в сценарии.

И вот результат: введите описание изображения здесь

1 Ответ

0 голосов
/ 21 октября 2019

Вам необходимо определить данные реквизита. Строки данных для отображения (: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>
...