Getting field value from column/row
-
I’m trying to create an q-table where I’m setting class depending data, while I’m doing it as generic as possible
I did manage to write the below code, which works fine with these two columns. But as any developer, I want to do it with as little code as possible. This code requires me to add a q-td for each column, and needs to be done on multiple pages (each with differen columns)
<q-table class="my-sticky-header-table" title="Bacon" :data="localData" :columns="columns" row-key="IdentID" flat bordered> <template v-slot:body="props"> <q-tr :props="props"> <q-td key="id" :props="props" :class="{ 'statusRow' : props.row.parentID === 0, 'proposalRow' : props.row.parentID !== 0}"> {{ props.row.id }} </q-td> <q-td key="no" :props="props" :class="{ 'statusRow' : props.row.parentID === 0, 'proposalRow' : props.row.parentID !== 0}"> {{ props.row.no }} </q-td> </q-tr> </template> </q-table>
data() { return { localData: this.data, columns: [ { name: 'id', required: true, label: 'Description', align: 'left', field: row => row.id }, { name: 'no', required: true, label: 'Count', align: 'left', field: row => row.no } ], }; },
I was considering if it was somehow possible to set the data based on the field property in column data. With a v-for I thought I should be able to get that information, so I wrote the below code. Unfortunately the text output I’m getting here is just “row => row.id”, etc.
<q-td v-for="col, name in columns" :key="col.name" :props="props" :class="{ 'statusRow' : props.row.parentID === 0, 'proposalRow' : props.row.parentID !== 0}"> {{ col.field }} </q-td>
Next I thought I might be able to get property value from the column index, but this gives me nothing
<q-td v-for="(col, index) in columns" :key="col.name" :props="props" :class="{ 'statusRow' : props.row.parentID === 0, 'proposalRow' : props.row.parentID !== 0}"> {{ props.row[index] }} </q-td>
Is there some way of doing this, or am I out of luck and need to do it for each column?
-
@AdrianG your
field
are functions, so use other method instead to get the value, usingcol.value
orprops.row[col.name]
. example https://codepen.io/metalsadman/pen/dyyBbEr?&editable=true&editors=101 -
Thanks @metalsadman, that was exactly what I was searching for