I am creating a general component based on v-data-table. This component has templates that are displayed anywhere, such as: ..template v-slot:item.index="{ item }"> ....
The idea is to be able to pass custom templates as children of the component, in this case I would like to pass "..template v-slot:item.state="{ item }"> ..."
As you can see, in the source code of the ..[DataTableFuntional>] <v-data-table... component there is a commented template (..template v-slot:item.state="{ item }">) which works perfectly.
But it does not suit my need since that way I would have to pass props to activate or deactivate the template because not all tables would always carry that field called "state"
DataTableFuntional component
<template>
<div>
<v-data-table
class="tableBackground"
:dense="dense"
:headers="headers"
:items="items.data"
:options.sync="options"
no-data-text="No hay datos disponibles"
:loading-text="$t('comunes.general.cargando')"
>
<!-- Custom templates -->
<template v-slot:body.append>
<slot name="body2"></slot>
</template>
<template v-slot:item.state="{ item }">
<slot name="state"></slot>
</template>
<!-- <template v-slot:item.state="{ item }">
<div class="">
<span v-if="item.state === 1" color="red">Close</span>
<span v-else-if="item.state === 2" color="green">Open</span>
</div>
</template> -->
<!-- Default templates -->
<template v-slot:item.index="{ item }">
{{ items.data.indexOf(item) + 1 }}
</template>
</v-data-table>
</div>
</template>
Now, if we see this code, which is the previous component imported in any page of the site.
We see that there are two "slots": v-slot: state" and "v-slot: body2" that are shown correctly, but if we see the code of the v-data-table> ... we can see that it is necessary to specify the v -slot in the template, for example:
<template v-slot: item.state = "{item}">
<slot name = "state"> </slot>
</template>.
now, if we see the first tamplate:
<template v-slot: item.state = "{item}">
<div class = "">
<span v-if = "item.state === 1" color = "red"> Close </span>
<span v-else-if = "item.state === 2" color = "green"> Open </ span
>
</div>
</template>
This would be the way I would more or less like to be able to assign new templates to the v-data-table component.
but it does not work.
if we see the following template
<template v-slot: state>
{{'Hello'}}
</template>
This does work but I don't know how to access the item to be able to set the conditions according to the state.
imported DataTableFuntional component whit child templates
<DataTableFuntional
:ref="'reference'"
:endpoint="item.endpoint"
:headers="item.headers"
:actions="item.actions"
:btsmall="true"
>
<!-- Custom templates -->
<template v-slot:item.state="{ item }">
<div class="">
<span v-if="item.state === 1" color="red">Close</span>
<span v-else-if="item.state === 2" color="green">Open</span
>
</div>
</template>
<template v-slot:state>
{{'Hello'}}
</template>
<template v-slot:body2>
<tr>
<td></td>
<td>
<v-text-field
type="number"
label="Less than"
></v-text-field>
</td>
<td colspan="4"></td>
</tr>
</template>
</DataTableFuntional>
Related
I have a Nuxt project with Buuefy implementation. I tried to make table with #empty slot when no data are available but it does not work. Documentation for Buefy table uses
<template #empty>
<div class="has-text-centered">No records</div>
</template>
My code looks like
<b-table :data="companies" id="agencyCompaniesTable" bordered>
<b-table-column v-for="column in columns" :key="column.id" v-bind="column">
<template v-if="column.searchable && !column.numeric"
#searchable="props">
<b-input v-model="props.filters[props.column.field]"
placeholder="Search..."
icon="magnify"
size="is-small" />
</template>
<template v-slot="props">
{{ props.row[column.field] }}
</template>
</b-table-column>
<template #empty>
<div class="has-text-centered">No records</div>
</template>
</b-table>
The code is identcal the table is empty but I dont see the text "No records". What could be the problem? Thanks for any help.
I have a el-table (Element) in a Vue component with a selection column in it. You can select the checkbox to select multiple items. I need to have the function of selecting the checkbox attached to elements in the table.
<el-table
:data="unit_list"
#selection-change="handleSelectionChange"
>
<el-table-column type="selection" />
<el-table-column prop="name" label="Name" >
<template slot-scope="scope" >
<span #click="toggleRow(scope.row)" class="click_cell">
{{ scope.row.name }}
</span>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<div class="no_click_cell">
You can't click this
</div>
</template>
</el-table-column>
...script
handleSelectionChange(val) {
this.$emit('selecttionChange', val) // this sends the resulting list to the parent component
}
The documentation is not clear as to how you can access the selection change from toggleRow
The method looks like this:
//...methods
toggleRow(row){
this.$refs.unitListTable.toggleRowSelection(row)
}
Where unitListTable is your table ref
<el-table
ref="unitListTable"
:data="checkSearch(unit_list)"
#selection-change="handleSelectionChange"
>
I am using vue-good-table for which I have created a component.
Table.vue
<vue-good-table
:columns="fields"
:pagination-options="paginationOptions"
:rows="items"
:search-options="{ enabled: true }"
:select-options="{ enabled: multiSelect }"
#on-cell-click="onCellClick"
#on-row-click="onRowClick"
#on-selected-rows-change="selectionChanged"
styleClass="vgt-table condensed striped"
v-else
>
<template slot="table-row" slot-scope="props">
<span v-else-if="props.column.field === 'viewActivity'">
<v-btn small>View Activity</v-btn>
</span>
<span v-else-if="props.column.field === 'remarks'">
<v-text-field
filled
rounded
dense
placeholder="Add Remarks"
v-model="props.row.remarks"
single-line
></v-text-field>
</span>
<span v-else>{{props.formattedRow[props.column.field]}}</span>
</template>
</vue-good-table>
Custom slot is having too many conditions here. I want to write these conditions in a page where I am using this Table.vue component. How can I do that? Perhaps with scoped slots or something which I am unable to figure out currently
I was facing problem in the syntax as vue good table uses old syntax of vuejs as it doesn't have much contributors now.
Solution:
<vue-good-table
:columns="fields"
:pagination-options="paginationOptions"
:rows="items"
:search-options="{ enabled: search }"
:select-options="{ enabled: multiSelect }"
#on-cell-click="onCellClick"
#on-row-click="onRowClick"
#on-selected-rows-change="selectionChanged"
styleClass="vgt-table condensed striped"
>
<template slot="table-row" slot-scope="props">
<slot :props="props" />
<span v-if="props.column.type === 'geo_image_capture' || props.column.type === 'image'">
</span>
<span v-else>
<a
:href="props.formattedRow[props.column.field]"
target="_blank"
>{{props.formattedRow[props.column.field]}}</a>
</span>
</template>
</vue-good-table>
I want to have a bootstrap table and already added input checkboxes to select them as well as a filter to get all selected items (which is totally fine).
After selecting a row, the dataset property "selected" should be set to 1 or true.
But i want to remain all the selected values also when i filter (which should already be fixed by persisting the "selected" attribute in my dataset shouldn't it?)
Currently i can check the checkbox and the checkbox value itself is changed too, but the row.value variable remains the same even if i use v-model for row.value (2-way-databinding)
So. How can i change the value of an attribute in a bootstrap table?
<b-table show-empty
stacked="md"
:items="items"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
#filtered="onFiltered"
>
<template slot="selected" slot-scope="row">
<input type="checkbox" id="checkbox" v-model="row.value">
{{row.value}}
</template>
<template slot="name" slot-scope="row">{{row.value}}</template>
<template slot="sapNumber" slot-scope="row">{{row.value}}</template>
<template slot="createDate" slot-scope="row">{{ moment(row.value).format('dd DD.MM.YY, hh:mm:ss')}}</template>
<template slot="master" slot-scope="row">
<!-- We use #click.stop here to prevent a 'row-clicked' event from also happening -->
<b-button size="sm" #click.stop="info(row.item, row.index, $event.target)" class="mr-1">
Info modal
</b-button>
<b-button size="sm" #click.stop="row.toggleDetails">
{{ 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>
The solution was quite simple.
Just change this part
<template slot="selected" slot-scope="row">
<input type="checkbox" id="checkbox" v-model="row.value">
{{row.value}}
</template>
to this one
<template slot="selected" slot-scope="data">
<input type="checkbox" id="checkbox" v-model="data.item.selected">
</template>
So the scope of this column does not effect the iterators dataset (which is "row" in my case) but the root data set of the data attribute.
I have template with repeater:
<template repeat.for="i of 2">
<template repeat.for="j of 2">
<p>${ $parent.$index } - ${ $index }</p>
</template>
</template>
Which prints result:
0 - 0
0 - 1
1 - 0
1 - 1
If I use custom element child-item with the same template:
<template>
<p>${ $parent.$index } - ${ $index }</p>
</template>
And write my original example using child-item:
<template repeat.for="i of 2">
<child-item repeat.for="j of 2"></child-item>
</template>
Result is only:
-
-
-
-
Is there a way to propagate $parent and $index transparently to the child-item?
UPDATE
After trying few suggestions, closest I came is this:
<template repeat.for="i of 2">
<child-item repeat.for="j of 2" parent-index.bind="$parent.$index" index.bind="$index"></child-item>
</template>
Where child-item template looks like:
<template bindable="parentIndex, index">
<p>${ parentIndex } - ${ index }</p>
</template>
Binding $parent context directly with parent.bind="$parent" does not work. Parent index has to be bound directly. With this approach anything inline with $parent.$parent.$index is not achievable.
something like this will work
child-item.ts:
import { customElement, bindable } from 'aurelia-framework';
#customElement('child-item')
export class ChildItem {
#bindable index;
}
child-item.html
<template>
<p>${ index }</p>
</template>
template with repeater:
<template>
<require from="./child-item">
<child-item repeat.for="child of childred" index.bind="$index"></child-item>
</template>
You would need to use databinding to pass it in. Add a parent or index bindable property to the child-item viewmodel.