0.15 QTable search

Sweetyy

Hi everyone,

I got a strange result when I enter ‘f’ in the search of my 3 differents QTable wich is that it doesn’t filter at all !
In one of my QTable, if I enter ‘j’ or ‘je’ it doesn’t filter at all too.

I checked several times and i don’t have those strings in my QTable’s data.

I implemented correctly all the QTable by checking the doc and I have no error.

What can be the problem ? And how can i see what is the string that correspond to my search ?

Thanks in advance

rstoenescu

Hi,

Can’t help you without seeing your vue file…

Sweetyy

Sorry I though that maybe it’s a common issue.
Here is the parts of my code that are concerned:

QTable:

<q-table
            :data="table"
            :filter="filter"
            :columns="columns"
            :visible-columns="visibleColumns"
            row-key="title"
            color="primary"
          >
            <template slot="body" slot-scope="props">
              <q-tr :props="props">
                <q-td key="title" :props="props">
                  {{ props.row.title }}
                </q-td>
                <q-td key="author" :props="props">
                  {{ props.row.author }}
                </q-td>
                <q-td key="date" :props="props">
                  {{ props.row.date }}
                </q-td>
                <q-td key="completed" :props="props">
                  {{ props.row.completed }}
                </q-td>
                <q-td key="versions" :props="props">
                  <q-chip small color="secondary" v-for="(version,index) in props.row.versions" v-bind:key="version.id" v-if="index === props.row.versions.length - 1">
                    {{ version.number }}
                  </q-chip>
                </q-td>
                <q-td key="actions" :props="props">
                  <q-checkbox color="primary" v-model="props.expand" checked-icon="remove" unchecked-icon="add" class="q-mr-md" />
                  <q-btn color="tertiary" size="md" @click="viewForm($event)"><q-icon name="visibility" /></q-btn>
                  <q-btn color="tertiary" size="md" @click="formClick($event, props.row)"><q-icon name="edit" /></q-btn>
                  <q-btn color="negative" size="md" @click="removeFormModal($event, props)"><q-icon name="delete" /></q-btn>
                </q-td>
              </q-tr>
              <q-tr v-show="props.expand" :props="props">
                <q-td colspan="100%">
                  <div class="text-left">This is expand slot for row above: {{ props.row.title }}.</div>
                </q-td>
              </q-tr>
            </template>
            <template slot="top-left" slot-scope="props">
              <q-search
                color="primary"
                v-model="filter"
              />
            </template>
          </q-table>

data():

table: [],
      columns: [
        {
          name: 'title',
          label: 'Titre',
          field: 'title',
          align: 'left',
          sortable: true
        },
        {
          name: 'author',
          label: 'Auteur',
          field: 'author',
          align: 'left',
          sortable: true
        },
        {
          name: 'date',
          label: 'Date',
          field: 'date',
          align: 'left',
          sortable: true
        },
        {
          name: 'completed',
          label: 'Q-Synth(s) complète(s)',
          field: 'completed',
          align: 'left',
          sortable: true
        },
        {
          name: 'versions',
          label: 'Versions',
          field: 'versions',
          align: 'left',
          sortable: false
        },
        {
          name: 'actions',
          label: 'Actions',
          field: 'actions',
          align: 'left',
          sortable: false
        }
      ],
      filter: '',
      visibleColumns: ['title', 'author', 'date', 'completed', 'versions', 'actions'],

Store with fake data:

forms: [
    {
      id: '1c58e652-b9ee-dbb2-9d8e-1518791916196',
      title: 'Testez vos aptitudes en négociation',
      author: 'Elodie',
      date: '2018-01-12 15:24',
      assignated: 'Teddy - teddy.levis@email.com',
      completed: 2,
      versions: [
        {
          number: '1.0',
          form: [
            {
              id: 'dc1247ec',
              label: 'Quelles étaient vos couleurs favorites ?',
              type: 'multiple',
              width: 12
            }
          ],
          synth: [
            {
              id: 'dc3447ec',
              label: 'Vos anciennes couleurs favorites',
              type: 'percentage',
              width: 12
            }
          ]
        },
        {
          number: '1.1',
          form: [
            {
              id: 'dc5647ec',
              label: 'Quelles sont vos couleurs favorites ?',
              type: 'multiple',
              width: 12
            }
          ],
          synth: [
            {
              id: 'dc7847ec',
              label: 'Vos couleurs favorites',
              type: 'percentage',
              width: 12
            }
          ]
        }
      ]
    },
    {
      id: '2c58e653-b9ee-dbb2-9d8e-1518791916196',
      title: 'Evaluez la maturité numérique de votre expert-comptable',
      author: 'Ethan',
      date: '2018-01-08 15:22',
      assignated: 'Teddy - teddy.levis@email.com',
      completed: 4,
      versions: [
        {
          number: '1.0',
          form: [
            {
              id: 'dc9147ec',
              label: 'Quelles sont vos jours de la semaine préférés ?',
              type: 'multiple',
              width: 12
            }
          ],
          synth: [
            {
              id: 'dc9247ec',
              label: 'Vos jours préférés',
              type: 'percentage',
              width: 12
            }
          ]
        }
      ]
    },
    {
      id: '3c58e654-b9ee-dbb2-9d8e-1518791916196',
      title: 'Analysez votre profil de vendeur BtoB',
      author: 'Elodie',
      date: '2018-01-08 15:20',
      assignated: 'Teddy - teddy.levis@email.com',
      completed: 4,
      versions: [
        {
          number: '1.0',
          form: [
            {
              id: 'dc9347ec',
              label: 'Quelles sont vos couleurs favorites ?',
              type: 'multiple',
              width: 12
            }
          ],
          synth: [
            {
              id: 'dc9447ec',
              label: 'Vos couleurs favorites',
              type: 'percentage',
              width: 12
            }
          ]
        }
      ]
    },
    {
      id: '4c58e655-b9ee-dbb2-9d8e-1518791916196',
      title: 'Analysez votre mode de pensée pour mieux négocier',
      author: 'Ethan',
      date: '2018-01-26 15:18',
      assignated: 'Teddy - teddy.levis@email.com',
      completed: 1,
      versions: [
        {
          number: '1.0',
          form: [
            {
              id: 'dc9547ec',
              label: 'Quelles sont vos couleurs favorites ?',
              type: 'multiple',
              width: 12
            }
          ],
          synth: [
            {
              id: 'dc9647ec',
              label: 'Vos couleurs favorites',
              type: 'percentage',
              width: 12
            }
          ]
        }
      ]
    },
    {
      id: '5c58e656-b9ee-dbb2-9d8e-1518791916196',
      title: 'Testez vos connaissances sur les techniques de ventes BtoC à domicile',
      author: 'Morgane',
      date: '2018-01-20 15:16',
      assignated: 'Teddy - teddy.levis@email.com',
      completed: 0,
      versions: [
        {
          number: '1.0',
          form: [
            {
              id: 'dc9747ec',
              label: 'Quelles sont vos couleurs favorites ?',
              type: 'multiple',
              width: 12
            }
          ],
          synth: [
            {
              id: 'dc9847ec',
              label: 'Vos couleurs favorites',
              type: 'percentage',
              width: 12
            }
          ]
        }
      ]
    }
  ]

I tried to remove the ‘versions’ for each but it’s still not filtering with the ‘f’ but workink for the ‘j’ or ‘je’.

Noticed that i tested in the 0.14 with the same data and it’s working fine when i search ‘f’ or ‘j’.

Thanks for the help

rstoenescu

Write your own custom filter-method when you have particular data.

No More Posting New Topics!

0.15 QTable search