0.0.6 • Published 7 years ago

b-table-b3 v0.0.6

Weekly downloads
-
License
MIT
Repository
-
Last release
7 years ago

#Tabela para bootstrap 3

Instalação:

npm i -s b-table-b3
import Vue from 'vue'

import bTable from 'b-table-b3'

Vue.component('b-table', bTable)

#Exemplo:

<template>
    <b-table striped hover :items="items" :fields="fields"
            :current-page="currentPage" :per-page="perPage"
            :filter="filter">

       <template slot="nome" slot-scope="item">
         <span class="text-danger"v-show="item.item.active == false">
           <i class="fa fa-eye-slash" aria-hidden="true"></i>
         </span>
           {{ item.item.nome }}
       </template>

       <template slot="select" slot-scope="item">
           <input class="magic-checkbox" type="checkbox" :id="item.item.id"
                  :value="item.item"  v-model="selecionadas"
                  v-if="item.item.user_id != null"
                 @click="selectCheckClick(item.item)">
              <label :for="item.item.id" v-if="item.item.user_id != null"></label>
       </template>

       <template slot="detalhes" slot-scope="item">
            <router-link :to="{ name: 'VerTeste', params: { id: item.item.id}}"
                          data-toggle="tooltip"
                          data-placement="top" title="Ver Teste">
                   <i class="fa fa-eye" aria-hidden="true"></i>
            </router-link>
       </template>

       <template slot="ativo" slot-scope="item">
         <span class="text-danger"v-show="item.item.active == false">
           <i class="fa fa-eye-slash" aria-hidden="true"></i>
           Inativo
         </span>
       </template>

       <template slot="pago" slot-scope="item">
           <span v-if="item.item.pago == 1">
             <i class="fa fa-usd" aria-hidden="true"></i>
           </span>
           <span v-else class="text-success">
             <i class="fa fa-glide-g" aria-hidden="true"></i>
           </span>
       </template>

       <template slot="editar" slot-scope="item">
           <router-link :to="{ name: 'EditarTeste',
                        params: { id: item.item.id }}"
                         v-show="item.item.user_id == null" data-toggle="tooltip"
                         data-placement="top" title="Editar Teste">
             <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
           </router-link>
       </template>
     </b-table>
 </template>

data()

currentPage: 1,
opsOfPage : [{text:10,value:10},{text:15,value:15},{text:20,value:20}],
items: [],
fields: {
  select: {
    label: ''
  },
  nome: {
    label: 'Teste',
    sortable: true
  },
  ativo:{
    label: ''
  },
  pago:{
    label: ''
  },
  editar:{
    label: ''
  },
  detalhes: {
    label: ''
  }
},
perPage: 10,
filter: null
0.0.6

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago