Quasar 框架 - VueJS

Posted 2023-02-22

【中文标题】Quasar 框架 - VueJS

【英文标题】：Quasar framework- VueJS

【发布时间】：2020-02-17 03:17:30

【问题描述】：

我使用 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

【参考方案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>

【讨论】：

感谢您的回复，我已经用您的代码修复了我的代码。我想问一下删除按钮中“index：props.row.__index”的目的是什么？谢谢

我可以删除索引并使用按钮删除进行更改吗？因为我想在该数据表上制作 CRUD 表。谢谢

我添加这个只是为了展示。不要忘记接受答案。有任何事情请告诉我。

谢谢你的回答，我也得到了我想要的结果。感谢您的帮助