servicio_social_front/components/admin/servicio/programa/tablaResponsables.vue

<template>
  <!--<div class="container">
    <div class="table-responsive-md">
      <table class="table mt-3 table-hover">
        <thead>
          <tr>
            <th>Nombre de responsable</th>
            <th>Correo</th>
          </tr>
        </thead>
        <tbody class="renglon">
          <tr
            v-for="responsable in responsables"
            :key="responsable.idResponsable"
            @click="verRegistro(responsable.idResponsable)"
          >
            <td>{{ responsable.nombre }}</td>
            <td>{{ responsable.correo }}</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>-->
  <section>
    <b-table
      class="tabla"
      hoverable
      :data="responsables"
      striped
      paginated
      :total="total"
      :per-page="perPage"
      @page-change="onPageChange"
      aria-next-label="Next page"
      aria-previous-label="Previous page"
      aria-page-label="Page"
      aria-current-label="Current page">
      <template v-for="column in columns">
        <b-table-column :key="column.id" v-bind="column">
        <template
          v-if="column.searchable && !column.numeric"
          slot="searchable"
          slot-scope="props">
          <b-input
            v-model="props.filters[props.column.field]"
            placeholder="Buscar por..."
            icon="magnify"
            class="busqueda"/>
        </template>
        <template v-slot="props">
          <span @click="verRegistro(props.row.idResponsable)">{{ props.row[column.field] }}</span>
        </template>
        </b-table-column>
      </template>
    </b-table>
  </section>
</template>

<script>
export default {
  data () {
    return {
      page: 1,
      perPage: 20,
      total: 0,
      responsables: [
        {
          idResponsable: 1,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 2,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 3,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 4,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 5,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 6,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 7,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 8,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 9,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 10,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 11,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 12,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 13,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 14,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 15,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 16,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 17,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 18,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 19,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 20,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 21,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 22,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 23,
          nombre: 'Marco',
          correo: 'correo1'
        },
        {
          idResponsable: 24,
          nombre: 'Lemuel',
          correo: 'correo2'
        }
      ],
      columns: [
        {
          field: 'idResponsable',
          visible: false
        },
        {
          field: 'nombre',
          label: 'Nombre responsable',
          searchable: true,
          centered: true
        },
        {
          field: 'correo',
          label: 'Correo electrónico',
          searchable: true,
          centered: true
        }
      ]
    }
  },
  methods: {
    verRegistro (idResponsable) {
      localStorage.setItem('idResponsable', idResponsable)
      this.$router.push('/programa/responsableinfo')
      console.log(idResponsable)
    },
    onPageChange (page) {
      this.page = page
      this.loadAsyncData()
    }
  },
  computed: {
    busquedaNombreResponsable () {
      return this.responsables.filter(responsables =>
        responsables.nombreResp.includes(this.buscarNombreResponsable)
      )
    }
  },
  watch: {
    busquedaCorreoResponsable () {
      this.obtenerResponsables()
    }
  }/* ,
  async created () {
    await this.obtenerResponsables()
  } */
}
</script>

<style scoped>
  .renglon:hover {
    cursor: pointer !important;
  }
  .busqueda {
    width: 200%;
    margin-left: 50%;
  }
  .tabla {
    margin-top: 50px;
    margin-bottom: 100px;
    border: 3px solid #1b3d70;
    border-radius: 10px;
    padding: 20px;
  }
</style>