b-table-b3
v0.0.6
Published
Tabela bootstrap 3
Downloads
2
Readme
#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