Componente para renderizar uma tabela com botões extras.

SimpleTableComponent.js

<template>
  <div>
    <q-table
      :data="tableData"
      :columns="columns"
      :filter="localFilter"
      row-key="name"
    >
      <template slot="top-right" slot-scope="props">
        <form autocomplete="off">
          <q-search hide-underline v-model="localFilter"/>
        </form>
      </template>
      <q-td slot="body-cell-acao" slot-scope="props" :props="props">
        <q-btn
          size="md"
          v-for="(item, index) in buttons"
          :key="index"
          v-if="permissionsNumbers[item.action](props.row)"
          :color="item.color"
          :icon="item.icon"
          @click="action(item.action, props.row.id)"
          class="q-mr-sm"
        >
          <q-tooltip v-if="item.tooltip" :offset="item.tooltip.offset">{{ item.tooltip.title }}</q-tooltip>
        </q-btn>
      </q-td>
    </q-table>
  </div>
</template>

<script>
export default {
  name: 'SimpleTableComponent',
  data () {
    return {
      localFilter: ''
    }
  },
  props: {
    tableData: {
      required: true
    },
    columns: {
      required: true
    },
    filter: {
      required: true
    },
    buttons: {
      type: Array,
      required: true
    },
    permissionsNumbers: {
      required: false
    }
  },
  methods: {
    action (describe, id) {
      this.$emit('action', {describe, id})
    }
  },
  created () {
    this.localFilter = this.filter
  }
}
</script>

<style>
</style>