Multi conditional q-table row formatting.
-
I want to format q-table using multiconditions for rows:
<q-table :title="'Exposure Data for Loan ID: ' + selectedID + ' [' + valuationCurrency + ']'" :data="TableData" :columns="TableCols" row-key="Name" hide-bottom class="col-9 valuation-exposure-table" style="margin: 0 auto;" :pagination.sync="pagination" > <template v-slot:body="props"> <q-tr :props="props" :class="tableFormat"> <q-td v-for="col in props.cols" :key="col.name" :props="props">{{ col.value }}</q-td> </q-tr> </template> </q-table>
However when I assign
tableFormat
class I get error:
TypeError: Cannot read property 'row' of undefined
So here is my computed class with my multiple conditions
tableFormat() { if ( this.props.row.Name === "Scheduled CF to equity before costs" || this.props.row.Name === "Scheduled CF to equity after servicing and funding" || this.props.row.Name === "Expected CF to equity" || this.props.row.Name === "Present value equity" ) { return "text-bold"; } else if ( this.props.row.Name === "Inputs used" || this.props.row.Name === "Outstanding balance" || this.props.row.Name === "Cash flows payments" ) { return "bg-accent text-white text-subtitle2"; } else { return "bg-white text-black"; } },
-
- Don’t use text like that as your row name. It’s not robust.
- You need to pass your props into your computed.
Scott
-
@s-molinari
How should I pass it to props? -
Try
:class="tableFormat(props)"
Scott