Q-table with colorful q-badge



  • Hey there, I want to make a column with colored q-badge items. For example: warning, error, info and etc. I tried with if:

          <template v-slot:body-cell-name="props">
            <div class="table-trace-row">
              {{ props.row.trace }}
            </div>
          </template>
          <template v-slot:body-cell-logLabel="props">
            <div class="flex flex-center">
              <q-tr :props="props">
                <q-badge :class="myTrClass(props)">
                  {{ props.row.logLabel }}
                </q-badge>
              </q-tr>
            </div>
          </template>
        ...
    
       methods: {
          myTrClass(props) {
            if (props.row.logLabel === 'TRACE') {
              return 'bg-grey-3'
            }
            if (props.row.logLabel === 'WARNING') {
              return 'bg-warning'
            }
            if (props.row.logLabel === 'ERROR') {
              return 'bg-red'
            }
            if (props.row.logLabel === 'DEBUG') {
              return 'bg-green'
            }
            if (props.row.logLabel === 'INFO') {
              return 'bg-purple'
            }
          }
        }
    

    Yes, it is working but I would like to go through the cycle and write a better option, more concise, shorter. Tell me please, what are the more convenient versions of this task?



  • @Kate use an object literal. ie.

    ...
      <q-badge :color="myTrClass(props.row.logLabel)">
         {{ props.row.logLabel }}
       </q-badge>
     ...
    
    const color = col => ({
              'TRACE': 'grey-3',
              'WARNING': 'warning',
              'ERROR': 'red',
              'DEBUG': 'green',
              'INFO': 'purple'
            }[col])
    ...
    myTrClass(logLabel) {
      return color(logLabel)
    }
    


  • @metalsadman Thank you very much! It is working.


Log in to reply