类星体框架-VueJS
Quasar framework- VueJS
我使用 VueJS 在 quasar 框架中编码我的数据 Table。
这是我的代码。
<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) 未被读取或出现在 table 中。我想要从我在脚本中声明的 absensi 获得的行的值。
这是结果:
enter image description here
您需要定义数据道具。要显示的数据行(:data
),您可以使用正文插槽自定义 table 的正文。您可以使用 __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>
我使用 VueJS 在 quasar 框架中编码我的数据 Table。 这是我的代码。
<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) 未被读取或出现在 table 中。我想要从我在脚本中声明的 absensi 获得的行的值。
这是结果: enter image description here
您需要定义数据道具。要显示的数据行(:data
),您可以使用正文插槽自定义 table 的正文。您可以使用 __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>