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的主要内容,如果未能解决你的问题,请参考以下文章