Hi, How can you make sure that only certain elements in the v-slot are available in a row that has the desired value in any of the columns, for example, the change button is available only in a row with calcium values greater than 15%? #9488

Dozez13 · 2021-05-31T08:11:05Z

Dozez13
May 31, 2021

I have q-table

<div id="q-app">
  <div class="q-pa-md">
    <div class="row q-col-gutter-sm">
      <div class="col">
        <q-table
          title="Simple"
          :data="data"
          :columns="columns"
          row-key="name"
          dense
        >
          <template v-slot:body-cell-actions="props">
            <q-td :props="props">
              <q-btn dense round flat color="grey" @click="editRow(props)" icon="edit">{{props.rowIndex}}</q-btn>
              <q-btn dense round flat color="grey" @click="deleteRow(props)" icon="delete"></q-btn>
            </q-td>          
          </template>
        </q-table>
      </div>
  </div>
</div>

And I have js code

new Vue({
  el: '#q-app',
  data () {
    return {
      columns: [
        {
          name: 'name',
          required: true,
          label: 'Dessert (100g serving)',
          align: 'left',
          field: row => row.name,
          format: val => `${val}`,
          sortable: true
        },
        { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
        { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
        { name: 'actions', label: 'Actions', field: '', align:'center' },
      ],
      data: [
        {
          name: 'Frozen Yogurt',
          calcium: '14%',
          iron: '1%'
        },
        {
          name: 'Ice cream sandwich',
          calcium: '8%',
          iron: '1%'
        },
        {
          name: 'Eclair',
          calcium: '6%',
          iron: '7%'
        },
        {
          name: 'Cupcake',
          calcium: '3%',
          iron: '8%'
        },
        {
          name: 'Gingerbread',
          calcium: '7%',
          iron: '16%'
        },
        {
          name: 'Jelly bean',
          calcium: '0%',
          iron: '0%'
        },
        {
          name: 'Lollipop',
          calcium: '0%',
          iron: '2%'
        },
        {
          name: 'Honeycomb',
          calcium: '0%',
          iron: '45%'
        },
        {
          name: 'Donut',
          calcium: '2%',
          iron: '22%'
        },
        {
          name: 'KitKat',
          calcium: '12%',
          iron: '6%'
        }
      ]
    }
  }
}
 )

So how can I do it?Thanks for answering