Toggle selection-change in Vue el-table on button click - javascript

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"
>

Related

Buefy table emty slot does not show the text

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.

child templates in custom component v-data-table

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>

Change style active v-autocomplete

How i can change style (border color) of v-autocomplete if at least one item is selected?
Now style is changed (blue) if focus is on the field, but become default (grey) if item is selected and focus is not on the field.
I need to stay blue border after removing focus
I try to change css but without success
.v-label .v-label--active .theme--light {
color: green !important;
border: 1px solid red !important;
}
<v-autocomplete
dense
v-model="filtered"
:items="filters"
:menu-props="{ maxHeight: '200' }"
label="Filter"
multiple
outlined
class="mr-md-1"
#change="fetchFilters"
>
<template v-slot:selection="{ item, index }">
<v-chip text-color="grey darken-4" class="indigo lighten-5">
<span>{{ item }}</span>
</v-chip>
</template>
</v-autocomplete>
No additional CSS is required. You could add classes as a Vue class binding:
:class="{'v-input--is-focused primary--text' : filtered.length}"
Using v-input--is-focused primary--text classes will be sufficient,
so your autocomplete will look like:
<v-autocomplete
dense
v-model="filtered"
:items="filters"
:menu-props="{ maxHeight: '200' }"
:class="{'v-input--is-focused primary--text' : filtered.length}"
label="Filter"
multiple
outlined
class="mr-md-1"
#change="fetchFilters"
>
This code is just checking if any items are present in the filtered array.
It has class "v-input--is-dirty". Try to use it in css, like
.theme--light.v-text-field.v-input--is-dirty>.v-input__control>.v-input__slot:before {
border-color: red;
}
On your custom selection template you can access the selected parameter and then just add a custom class if it's true or not
<template v-slot:selection="{ item, index, selected }">
<v-chip
text-color="grey darken-4"
class="indigo lighten-5"
:class=" selected ? 'customActiveClass' : '' "
>
<span>{{ item }}</span>
</v-chip>
</template>
Here is the link of vuetify doc for the v-autocomplete https://vuetifyjs.com/en/api/v-autocomplete/#api-slots

Select `vaadin-grid` Row Data with Button

<vaadin-grid id="grid" items="[[data]]" active-item="{{activeItem}}">
<vaadin-grid-column>
<template class="header">#</template>
<template>[[index]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">First Name</template>
<template>[[item.name.first]]</template>
</vaadin-grid-column>
</vaadin-grid>
Using the activeItem pattern vaadin-grid row data can be selected when clicking on a row.
Is there a way to invoke this with a button action?
Perhaps by selecting a property from a parent node?
<vaadin-grid id="grid" items="[[data]]" active-item="{{activeItem}}">
<vaadin-grid-column>
<template class="header">#</template>
<template>[[index]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">First Name</template>
<template><paper-button on-tap="selectRowData">Select</paper-button</template>
</vaadin-grid-column>
</vaadin-grid>
You can select row data with a button by getting the row index and selecting the row from the data source.
<vaadin-grid id="grid" items="[[data]]" active-item="{{activeItem}}">
<vaadin-grid-column>
<template class="header">#</template>
<template>[[index]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">First Name</template>
<template>
<paper-button id="[[index]] on-tap="selectRowData">Select</paper-button</template>
</vaadin-grid-column>
</vaadin-grid>
...
selectRowData(e) {
let row = this.data[e.detail.sourceEvent.target.id];
// do something with row data
}
Place a button in one of the cell templates, bind a click listener for that which receives the item as a parameter. This is easiest to do with Polymer data binding. Then add the item to grid.selectedItems array in the listener callback.
<vaadin-grid-column width="14em">
<template>
<vaadin-button on-click="deleteUser" >
<iron-icon icon="icons:delete" ></iron-icon>
</vaadin-button>
</template>
//You don't need to define any model it's simply available
deleteUser(e)
{
let row=e.model.item;
console.log(row);
// e.g. make a REST Delete Operation with iron-ajax
this.$.ajaxUserModify.url=this.dataURL+"/"+row.id;
this.$.ajaxUserModify.method="delete";
this.$.ajaxUserModify.body="";
this.$.ajaxUserModify.generateRequest();
}

How to make the bootstrap table rows selectable and remain the selected rows on filter?

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.

Categories