No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Getting field value from column/row

    Help
    2
    3
    1506
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      AdrianG last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by 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

        1 Reply Last reply Reply Quote 2
        • A
          AdrianG last edited by AdrianG

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

          1 Reply Last reply Reply Quote 0
          • First post
            Last post