Getting field value from column/row

AdrianG

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?

metalsadman

@AdrianG your field are functions, so use other method instead to get the value, using col.value or props.row[col.name]. example https://codepen.io/metalsadman/pen/dyyBbEr?&editable=true&editors=101

AdrianG

Thanks @metalsadman, that was exactly what I was searching for