When I try with the below data, I get the first column as true/false instead of a checkbox.
Here is the vue table:
<b-table id="myTabel" hover striped :items="tableData" :fields="tableColumns">
<template slot="selected" slot-scope="row">
<b-form-group>
<input type="checkbox" v-model="row.item.selected" />
</b-form-group>
</template>
</b-table>
Here is the my table data:
tableData: [{
title: "title01",
desc: "desc01",
selected: false
},
{
title: "title02",
desc: "desc02",
selected: true
}
],
tableColumns: [{
key: "selected",
label: "",
sortable: false
},
{
key: "title",
label: "Title",
sortable: false
},
{
key: "desc",
label: "Description",
sortable: false
}
]
Change your template to:
<template v-slot:cell(selected)="data">
<b-form-group>
<input type="checkbox" v-model="data.item.selected" />
</b-form-group>
</template>
https://jsfiddle.net/ellisdod/wvLjhmou/
see custom data rendering
Related
Im trying to insert a checkbox column using quasar. The way I did, it only appears as the first element of the table, and I want it as the second element. How do I do this?
Example:
export default {
name: 'DespesasGeraisBKOOnline',
data() {
return{
columns: [
{
name: 'acoes',
label: 'Ações',
field: (row) => row.acoes,
sortable: true,
align: 'center',
},
{
name: 'pc',
align: 'center',
label: 'PC ',
sortable: false,
},
{
name: 'criada_em',
label: 'Criada em',
field: (row) => row.criada_em,
sortable: true,
align: 'center',
},
{
name: 'nome',
label: 'Nome',
field: (row) => row.nome,
sortable: true,
align: 'center',
},
}
}
<q-table
:data="data"
:columns="columns"
row-key="id"
selection="multiple"
class="default-table q-mt-xs"
>
<template v-slot:no-data="{}">
<div class="full-width row flex-center no-data-finded q-gutter-sm">
<span>
{{ loading ? 'Carregando...' : 'Nenhuma despesa encontrada.' }}
</span>
</div>
</template>
</q-table>
If you run the code, you can see that the first column is the "checkbox". However, I want this as the second column.
<template v-slot:body="props">
<q-tr :props="props">
<q-td key="text" :props="props">{{ props.row.title }}</q-td>
<q-td key="radio" :props="props"><q-radio v-model="input" :label="props.row.label" /></q-td>
<q-td key="checkbox" :props="props"><q-checkbox v-model="input" :label="props.row.label" /></q-td>
<q-td key="button" :props="props"><q-btn label="btn" #click="method"/></q-td>
</q-tr>
</template>
This is the way i usually define table if i want to insert any form control peacefully within any column
Element UI
I have fetch the data from backend and use it as select option which does not come with value object, but
when I try to select any item in select option, the select option show all item list selected, but the model value is correct
Follow Code Fetch the Bug
<el-option
v-for="item in options"
:key="item.key"
:label="item.label"
:value="item">
</el-option>
This was the Sample Bug I created...
https://codepen.io/JackarooNg/pen/qBRdqgO
The problem is with model name is matched with select option's property of key and label
Step 1: Script will be like
<script>
new Vue({
el: "#app",
data: function () {
return {
visible: false,
options: [
{
value: "Option1",
label: "Option1"
},
{
value: "Option2",
label: "Option2"
},
{
value: "Option3",
label: "Option3"
}
],
options1: [
{
value: "Option1",
label: "Option1"
},
{
value: "Option2",
label: "Option2"
},
{
value: "Option3",
label: "Option3"
}
],
value: "",
value1: ""
};
}
});
Step 2: HTML template will be
<div id="app">
<el-button #click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item"
>
</el-option>
</el-select>
{{value}}
<el-select v-model="value1" placeholder="Select">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item"
>
</el-option>
</el-select>
{{value1}}
</div>
DEMO
In my project I'm using BootstrapVue and VueJS. I'm currently doing a b-table and I have a boolean field in its fields. It displays correctly true and false, but I'd like to display something else (e.g. : Active for true and Inactive for false). I haven't found anything on how to do that (if there is something built-in, I haven't seen it in the docs).
Here is my current field declaration for the b-table of BootstrapVue :
table_fields: [
{ key: 'username', sortable: true },
{ key: 'firstName', sortable: true },
{ key: 'lastName', sortable: true },
{ key: 'isActive', sortable: true, label: 'Status'},
{ key: 'actions', label: 'Actions' }
]
The field that i'd like to change the behavior of is isActive.
Thanks in advance for your tips ! :)
I've found a way to do it, using what I could read HERE. Indeed it is possible to define custom slots.
Finally my field declaration looks like :
table_fields: [
{ key: 'username', sortable: true },
{ key: 'firstName', sortable: true },
{ key: 'lastName', sortable: true },
{ key: 'isActive', sortable: true, label: 'Status' },
{ key: 'actions', label: 'Actions' }
]
the little snippet for the custom slot :
<template v-slot:cell(isActive)="row">
<b-badge
v-if="row.item.isActive"
variant="success">
Active
</b-badge>
<b-badge
v-else
variant="warning">
Archived
</b-badge>
</template>
and my whole b-table :
<b-table
hover
:items="users"
:fields="table_fields">
<template v-slot:cell(isActive)="row">
<b-badge
v-if="row.item.isActive"
variant="success">
Active
</b-badge>
<b-badge
v-else
variant="warning">
Archived
</b-badge>
</template>
<template v-slot:cell(actions)="row">
<span v-if="row.item.isActive">
<b-button
to="#"
size="sm"
variant="primary"
class="mr-1"
title="Edit">
<font-awesome-icon :icon="['fas', 'pen']"/>
</b-button>
<b-button
#click="archiveUser(row.item.id)"
size="sm"
class="mr-1"
title="Archive">
<font-awesome-icon :icon="['fas', 'archive']"/>
</b-button>
</span>
<b-button
v-else
#click="unarchiveUser(row.item.id)"
variant="success"
size="sm"
class="mr-1"
title="Unarchive">
<font-awesome-icon :icon="['fas', 'caret-square-up']"/>
</b-button>
<b-button
#click="deleteUser(row.item.id)"
size="sm"
variant="danger"
class="mr-1"
title="Delete">
<font-awesome-icon :icon="['fas', 'trash-alt']"/>
</b-button>
</template>
</b-table>
and what it looks like :
You can see that in the column Status the b-badge is displayed instead of true or false
trying to achieve the same result as https://bootstrap-vue.js.org/docs/components/table#row-details-support
My code:
<b-table ref="propertydata" striped hover
:items="datatable.items"
:fields="datatable.fields"
:current-page="datatable.currentPage"
:per-page="datatable.perPage"
:filter="datatable.filter"
:sort-by.sync="datatable.sortBy"
:sort-desc.sync="datatable.sortDesc"
:sort-direction="datatable.sortDirection"
#filtered="onFiltered">
<template slot="action" slot-scope="row">
<!-- we use #click.stop here to prevent emitting of a 'row-clicked' event -->
<b-button size="sm" #click.stop="row.toggleDetails" class="mr-2">
{{ row.detailsShowing ? 'Hide' : 'Show'}} Details
</b-button>
</template>
<template slot="row-details" slot-scope="row">
<b-card>
<ul>
<li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value}}</li>
</ul>
</b-card>
</template>
</b-table>
<b-row>
<b-col md="6" class="my-1">
<b-pagination :total-rows="datatable.totalRows" :per-page="datatable.perPage" v-model="datatable.currentPage" class="my-0" />
</b-col>
</b-row>
/* Datatable related */
datatable: {
fields: [
{
key: 'account_id',
sortable: true
},
{
key: 'account_name',
sortable: true
},
{
key: 'property_count',
sortable: true,
},
{
key: 'commission',
sortable: true,
variant: 'success'
},
{
key: 'action',
}
],
items: [],
currentPage: 1,
perPage: 20,
totalRows: 0,
pageOptions: [ 20, 100, 300, 500, 1000, 2000, 3000 ],
sortBy: null,
sortDesc: false,
sortDirection: 'asc',
filter: null
}
computed: {
sortOptions () {
// Create an options list from our fields
return this.datatable.fields
.filter(f => f.sortable)
.map(f => { return { text: f.label, value: f.key } })
}
}, // END COMPUTED
methods: {
onFiltered (filteredItems) {
// Trigger pagination to update the number of buttons/pages due to filtering
this.datatable.totalRows = filteredItems.length
this.datatable.currentPage = 1
}
}, // END METHODS
The result is:
As you can see, the show details is isolated to a single column instead of the full row.
What I want to achieve is for this show details section to be the full row width and if I could click the button to go to a method to call additional data to be displayed here as oppose to the native bootstrap-vue functionality.
I m new to Vue and stuck in a situation and don't know how to do that if anybody suggests me how I can do this let me show my code first
<div class="table-responsive-sm">
<vue-good-table
title="Shop List Table"
:columns="columns"
:rows="rows"
:paginate="true"
:lineNumbers="true"
:globalSearch="true" >
<template slot="table-row" slot-scope="props" ><a class="btn btn-sm primary" #on-row-click="onRowClick">save</a></template>
</vue-good-table>
and in script
data(){
return{
columns: [
{
label: 'Brand Name',
field: 'brand_name',
},
{
label: 'Brand Desc',
field: 'brand_desc',
},
{
label: 'Action',
field: 'before',
},
],
rows:[],
}
}
getTotals(){
var self = this;
var new1=[];
this.$http.get('/api/brands')
.then(function (response) {
self.rows=response.data
})
},
now my problem is that if I use
<span v-if="props.column.field == 'before'">
before
</span>
as suggested in this https://jsfiddle.net/aks9800/hsf0sqf8/ it throws an error like field not defined I just want to add an extra action button for edit this is vue-good table one more thing none of the action as suggested in this link for eg:- #on-row-click="onRowClick" not working
Try this
<div class="table-responsive-sm">
<vue-good-table
title="Shop List Table"
:columns="columns"
:rows="rows"
:paginate="true"
:lineNumbers="true"
:globalSearch="true" >
<template slot="table-row" slot-scope="props" >
<a class="btn btn-sm primary" #on-row-click="onRowClick">save</a>
</template>
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'actions'">
<a class="btn btn-sm primary" #on-row-click="onRowClick">save</a>
</span>
<span v-else>
{{props.formattedRow[props.column.field]}}
</span>
</template>
</vue-good-table>
</div>
data(){
return{
columns: [
{
label: 'Brand Name',
field: 'brand_name',
},
{
label: 'Brand Desc',
field: 'brand_desc',
},
{
label: 'Actions',
field: 'actions',
sortable: false,
}
],
rows:[],
}
}
getTotals(){
var self = this;
var new1=[];
this.$http.get('/api/brands')
.then(function (response) {
self.rows=response.data
})
},
Here is very good example how to add "edit" button in a row by marekfilip
https://jsfiddle.net/marekfilip/jm4ywzor/
html:
<div id="app">
<vue-good-table
:columns="columns"
:rows="rows" >
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'before'">
<button #click="editRow(props.row.id)">Edit</button>
<button #click="deleteRow(props.row.id)">Delete</button>
</span>
<span v-else>
{{props.formattedRow[props.column.field]}}
</span>
</template>
</vue-good-table>
<span>{{ text }}</span>
</div>
javascript
new Vue({
el: '#app',
data() {
return {
columns: [
{
label: 'Before',
field: 'before'
},
{
label: 'ID',
field: 'id',
sortable: true,
},
{
label: 'Text',
field: 'text',
type: 'number',
sortable: true,
},
],
rows: [
{ text: 'A', id: 1 },
{ text: 'B', id: 2 },
{ text: 'C', id: 3 },
{ text: 'D', id: 5 },
],
text: ''
};
},
methods: {
editRow(id) {
this.showAlert(id, 'EDIT')
},
deleteRow(id) {
this.showAlert(id, 'DELETE')
},
showAlert(id, type) {
this.text = `You clicked ${type} on row ID ${id}`
}
}
});