servicio_social_front/components/responsable/inputTable.vue

<template>
  <div class="container">
    <div class="columns">
      <div class="column is-3">
        <b-field>
          <b-input placeholder="No.Cuenta"
              minlength="9"
              maxlength="9"
              icon="school"
              rounded></b-input>
        </b-field>
      </div>

      <div class="column is-3">
        <b-field>
          <b-input placeholder="Nombre"
          icon="account"
          rounded></b-input>
        </b-field>
      </div>

      <div class="column is-3">
        <b-field>
          <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>
              <option value="Registro">Registro</option>
              <option value="Pre-término">Pre-término</option>
              <option value="Término">Término</option>
              <option value="Liberado">Liberado</option>
              <option value="Rechazado">Rechazado</option>
            </optgroup>
          </b-select>
        </b-field>
      </div>
    </div>

    <div class="columns">
      <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>
</template>

<script>
export default {
  data () {
    return {
      data: [
        {
          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
        },
        {
          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
        },
        {
          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
        },
        {
          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
        },
        {
          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
        },
        {
          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
        },
        {
          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>

<style></style>