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>