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, using col.value or props.row[col.name]. example https://codepen.io/metalsadman/pen/dyyBbEr?&editable=true&editors=101



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


Log in to reply