V-1.2-tablaProvisional
This commit is contained in:
Andres2908
@@ -1,19 +1,27 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-2">
|
||||
<div class="column is-3">
|
||||
<b-field>
|
||||
<b-input placeholder="No.Cuenta" icon="school" rounded></b-input>
|
||||
<b-input placeholder="No.Cuenta"
|
||||
minlength="9"
|
||||
maxlength="9"
|
||||
icon="school"
|
||||
rounded></b-input>
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
|
||||
<div class="column is-3">
|
||||
<b-field>
|
||||
<b-input placeholder="Nombre" icon="account" rounded></b-input>
|
||||
<b-input placeholder="Nombre"
|
||||
icon="account"
|
||||
rounded></b-input>
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
|
||||
<div class="column is-3">
|
||||
<b-field>
|
||||
<b-select placeholder="Status" icon="information" rounded>
|
||||
<b-select placeholder="Status" icon="information" expanded rounded>
|
||||
<optgroup label="Status">
|
||||
<option value="Pre-registro">Pre-registro</option>
|
||||
<option value="Pre-validado">Pre-validado</option>
|
||||
@@ -29,8 +37,39 @@
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<section class="column is-12 is-hoverable has-text-centered">
|
||||
<b-table :data="datos" :columns="columns"></b-table>
|
||||
<section class="column is-12">
|
||||
<b-table
|
||||
:data="data"
|
||||
ref="table"
|
||||
paginated
|
||||
per-page="5"
|
||||
hoverable
|
||||
striped>
|
||||
|
||||
<b-table-column field="nombre" label="Nombre" v-slot="props" centered>
|
||||
<span @click="cualquiera(props.row.nombre)">{{ props.row.nombre }}</span>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="carrera" label="Carrera" v-slot="props" centered>
|
||||
<span @click="cualquiera(props.row.carrera)">{{ props.row.carrera }}</span>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="numeroCuenta" label="Número de Cuenta" v-slot="props" centered>
|
||||
<span @click="cualquiera(props.row.numeroCuenta)">{{ props.row.numeroCuenta }}</span>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="fechaInicio" label="Inicio" centered v-slot="props">
|
||||
<span @click="cualquiera(props.row.fechaInicio)">{{ props.row.fechaInicio }}</span>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="fechaFin" label="Final" centered v-slot="props">
|
||||
<span @click="cualquiera(props.row.fechaFin)">{{ props.row.fechaFin }}</span>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="status" label="Status" v-slot="props" centered>
|
||||
<span @click="cualquiera(props.row.status)" class="tag" :class="type(props.row.status)">{{ props.row.status }}</span>
|
||||
</b-table-column>
|
||||
</b-table>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
@@ -40,51 +79,126 @@
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
datos: [
|
||||
data: [
|
||||
{
|
||||
nombre: 'Andres Hernan Saavedra Trejo',
|
||||
carrera: 'Matematicas Aplicadas y computacion',
|
||||
noCuenta: 419085500,
|
||||
inicio: '1/11/2020',
|
||||
final: '1/5/2020',
|
||||
status: 'Pre-registro'
|
||||
idRegistro: 1, // span
|
||||
nombre: 'Lemuel',
|
||||
carrera: 'Matemáticas Aplicadas y Computación',
|
||||
numeroCuenta: '41908550',
|
||||
fechaInicio: '1/01/2020',
|
||||
fechaFin: '1/06/2020',
|
||||
status: 'pre-validado',
|
||||
idStatus: 1
|
||||
},
|
||||
{
|
||||
nombre: 'Andres Hernan Saavedra Trejo',
|
||||
carrera: 'Matematicas Aplicadas y computacion',
|
||||
noCuenta: 419085500,
|
||||
inicio: '1/11/2020',
|
||||
final: '1/5/2020',
|
||||
status: 'Pre-registro'
|
||||
}
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
field: 'nombre',
|
||||
label: 'Nombre'
|
||||
idRegistro: 1, // span
|
||||
nombre: 'Andrés Hernan Saavedra Trejo',
|
||||
carrera: 'Matemáticas Aplicadas y Computación',
|
||||
numeroCuenta: '41908550',
|
||||
fechaInicio: '1/01/2020',
|
||||
fechaFin: '1/06/2020',
|
||||
status: 'pre-registro',
|
||||
idStatus: 1
|
||||
},
|
||||
{
|
||||
field: 'carrera',
|
||||
label: 'Carrera'
|
||||
idRegistro: 1, // span
|
||||
nombre: 'Marco',
|
||||
carrera: 'Matemáticas Aplicadas y Computación',
|
||||
numeroCuenta: '41908550',
|
||||
fechaInicio: '1/01/2020',
|
||||
fechaFin: '1/06/2020',
|
||||
status: 'pre-validado',
|
||||
idStatus: 1
|
||||
},
|
||||
{
|
||||
field: 'noCuenta',
|
||||
label: 'Número de Cuenta'
|
||||
idRegistro: 1, // span
|
||||
nombre: 'Eithan',
|
||||
carrera: 'Matemáticas Aplicadas y Computación',
|
||||
numeroCuenta: '41908550',
|
||||
fechaInicio: '1/01/2020',
|
||||
fechaFin: '1/06/2020',
|
||||
status: 'pre-registro',
|
||||
idStatus: 1
|
||||
},
|
||||
{
|
||||
field: 'inicio',
|
||||
label: 'Inicio'
|
||||
idRegistro: 1, // span
|
||||
nombre: 'Brenda',
|
||||
carrera: 'Matemáticas Aplicadas y Computación',
|
||||
numeroCuenta: '41908550',
|
||||
fechaInicio: '1/01/2020',
|
||||
fechaFin: '1/06/2020',
|
||||
status: 'registro',
|
||||
idStatus: 1
|
||||
},
|
||||
{
|
||||
field: 'final',
|
||||
label: 'Final'
|
||||
idRegistro: 1, // span
|
||||
nombre: 'Lemuel',
|
||||
carrera: 'Matemáticas Aplicadas y Computación',
|
||||
numeroCuenta: '41908550',
|
||||
fechaInicio: '1/01/2020',
|
||||
fechaFin: '1/06/2020',
|
||||
status: 'pre-termino',
|
||||
idStatus: 1
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: 'Status'
|
||||
idRegistro: 1, // span
|
||||
nombre: 'Lemuel',
|
||||
carrera: 'Matemáticas Aplicadas y Computación',
|
||||
numeroCuenta: '41908550',
|
||||
fechaInicio: '1/01/2020',
|
||||
fechaFin: '1/06/2020',
|
||||
status: 'termino',
|
||||
idStatus: 1
|
||||
},
|
||||
{
|
||||
idRegistro: 1, // span
|
||||
nombre: 'Lemuel',
|
||||
carrera: 'Matemáticas Aplicadas y Computación',
|
||||
numeroCuenta: '41908550',
|
||||
fechaInicio: '1/01/2020',
|
||||
fechaFin: '1/06/2020',
|
||||
status: 'liberado',
|
||||
idStatus: 1
|
||||
},
|
||||
{
|
||||
idRegistro: 1, // span
|
||||
nombre: 'Lemuel',
|
||||
carrera: 'Matemáticas Aplicadas y Computación',
|
||||
numeroCuenta: '41908550',
|
||||
fechaInicio: '1/01/2020',
|
||||
fechaFin: '1/06/2020',
|
||||
status: 'rechazado',
|
||||
idStatus: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onPageChange (page) {
|
||||
this.page = page
|
||||
this.loadAsyncData()
|
||||
},
|
||||
type (status) {
|
||||
/* const Status = parseFloat(status) Investigar para que sirve :) */
|
||||
if (status === 'pre-registro') {
|
||||
return 'is-dark'
|
||||
} else if (status === 'pre-validado') {
|
||||
return 'is-warning'
|
||||
} else if (status === 'registro') {
|
||||
return 'is-info'
|
||||
} else if (status === 'pre-termino') {
|
||||
return 'is-link'
|
||||
} else if (status === 'termino') {
|
||||
return 'is-success'
|
||||
} else if (status === 'liberado') {
|
||||
return 'is-success'
|
||||
} else if (status === 'rechazado') {
|
||||
return 'is-danger'
|
||||
}
|
||||
},
|
||||
cualquiera (variable) {
|
||||
console.log(variable)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user