[Solved] DataTable - Syntax of rendering data (what's the difference)



  • When reading source code from file “table-features.vue” and “table-customize.vue” in the online documetation, I found there are two ways to render data based on row level. I just wonder what’s the difference?
    The first way is from table-features.vue at line 218

    <q-table>
      <q-tr slot="body" slot-scope="props" :props="props">
        <q-td key="[fieldName]" :props="props"> {{ props.row.[fieldName] }} </q-td>
    

    The second way is from table-customize.vue at line 164

    <q-table>
      <template slot="body" slot-scope="props">
        <q-tr :props="props">
          <q-td key="[fieldName]" :props="props">{{ props.row.[fieldName] }}</q-td>
    


  • The bottom one is the old way of creating content for slots, the top one the new way. Before with slots, you had to define a template to inject that content into a slot. With newer versions of Vue (can’t recall the actual version), you can inject content into a slot with any type of element, like a <tr> instead of a <template>.

    Scott



  • @s-molinari Thanks for the explanation!