pcpuma_unam_operador/components/tablas/TablaInstituciones.vue
2022-08-02 01:09:21 -05:00

77 lines
1.7 KiB
Vue

<template>
<b-table
class="pb-6"
:data="instituciones"
:loading="isLoadingTable"
:per-page="25"
:row-class="(row, index) => 'pointer'"
:selected.sync="institucionSeleccionada"
:total="total"
backend-pagination
hoverable
paginated
striped
>
<b-table-column
field="institucion"
label="Institución"
v-slot="props"
centered
>
<p>{{ props.row.institucion }}</p>
</b-table-column>
<b-table-column field="status" label="Status" v-slot="props" centered>
<p
class="is-size-6 tag"
:class="props.row.activo ? 'is-success' : 'is-danger'"
>
{{ props.row.activo ? 'Activo' : 'Inactivo' }}
</p>
</b-table-column>
<b-table-column
field="responsable"
label="Responsable"
v-slot="props"
centered
>
<p>{{ props.row.responsable }}</p>
</b-table-column>
<b-table-column field="correo" label="Correo" v-slot="props" centered>
<p>{{ props.row.correo }}</p>
</b-table-column>
<b-table-column field="dominio" label="Dominio" v-slot="props" centered>
<p>{{ props.row.dominio }}</p>
</b-table-column>
</b-table>
</template>
<script>
export default {
props: {
instituciones: { type: Array, required: true, default: () => [] },
isLoadingTable: { type: Boolean, required: true, default: false },
total: { type: Number, required: true, default: 0 },
},
data() {
return { institucionSeleccionada: {} }
},
watch: {
institucionSeleccionada() {
this.$router.push(
`/admin/configuracion/instituciones/buscar_institucion/${this.institucionSeleccionada.id_institucion}`
)
},
},
}
</script>
<style>
.pointer {
cursor: pointer;
}
</style>