Quasar 框架 - VueJS

Posted

技术标签:

【中文标题】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 表。谢谢 我添加这个只是为了展示。不要忘记接受答案。有任何事情请告诉我。 谢谢你的回答,我也得到了我想要的结果。感谢您的帮助

以上是关于Quasar 框架 - VueJS的主要内容,如果未能解决你的问题,请参考以下文章

java 协程框架quasar gradle配置

Quasar 框架上传器与 axios

Quasar 框架 Flex 类

Quasar 框架与 VueX

Quasar框架和Vuetify如何集成?

如何将 @vue/apollo-composable 添加到 Quasar 框架