Is it even possible to search in expand slot in v-data-table?
According to my test below it doesn't work, try to search expandData property in items
<template slot="expand" slot-scope="props">
{{ props.item.expandData }}
</template>
codepen test
What should I look further for next step in case if need this kind of search for my project?
Thanks in advance
Related
In my Spring Boot project, I am iterating a Thymeleaf list like below:
<div th:each="filename: ${files}">
<div class="bold badge badge-primary" th:text="${filename}"></div>
</div>
Question: I am clueless on how can assign badge-primary and badge-secondary (bootstrap4.5) classes to alternate list items while iterating through them?
In simple words, first list item should have badge-primary class, second list item badge-secondary and so on.
Is it possible? If yes, then how? Thanks.
When using th:each, Thymeleaf offers a mechanism useful for keeping track of the status of your iteration: the status variable. Per Thymeleaf documentation example, your code may look like the following ...
<div th:each="filename,iterStat: ${files}">
<div class="bold badge badge-primary" th:class="'bold badge'" th:classappend="${iterStat.odd}? 'badge-primary' : 'badge-secondary'" th:text="${filename}"></div>
</div>
In Vuetify components-lib there is a hint that on I can bring my own custom v-list-item with slot:item
// item
// Description
// Define a custom item appearance
// Props
{
parent: VueComponent
item: object
on: object // Only needed when providing your own v-list-item
attrs: object // Only needed when providing your own v-list-item
}
How can I achive that? because when I do
<template v-slot:item="data">
<book :book="data.item"></book>
</template>
Vutifiey warp-up it with own v-list-item and I want to put some custom class on part ot the v-list-items
It is a very common scenario to add some custom styling in the v-auto-complete's list. But, there is no way of avoiding v-list/v-list-item as Vuetify does not give you the full control of the dropdown menu.
As you may have noticed that dropdown menu is like the v-menu and the input element for v-autocomplete is the activator of the dropdown menu. So, this is how the v-autocomplete component works:
Vuetify creates a dropdown menu and add its own logic(HTML, CSS, JS) into it.
it gives users the slots to add custom markup/components inside the v-list-items
That is why there is no way of avoiding the v-list component.
I have attached a pen to help you in better understanding how you can use a custom component inside v-list/v-list-item of v-autocomplete: https://codepen.io/abdullah-shabaz/pen/MWwZNYW
If you are having some problems with styling your book component please tell me. I am sure I can help you with it.
I know this is an old question, I was looking for the same thing so if anybody needs this in the future, the answer is:
<template v-slot:item="{item, on, attrs}">
<v-list-item
v-bind="attrs"
v-on="on"
>
<v-list-item-avatar>
<v-icon v-if="attrs.inputValue">mdi-checkbox-marked</v-icon>
<v-icon v-else>mdi-checkbox-blank-outline</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
Do you know where can i find an implementation of the super select of Google Data studio with the "Only" to select only that element ?
you can also filter results , super handy if the list is long :
There is a feature request for select-all functionality, and apparently it will be possible using to-be-implemented scoped-slot called prepend-item.
So currently you will need some workaround.
Updated codepen with prepend-item slot which came in version 1.2:
https://codepen.io/anon/pen/EdVpmY
(must look into filtering more so I'll update if something changes)
Note prepend-item is also part of the parent v-list component, so we can't easily fix controls to the top.
<template slot="prepend-item">
<v-list-tile #click.stop="selected = selectedAll ? [] : states.slice()">
<v-list-tile-action>
<v-icon :color="selected.length > 0 ? 'indigo darken-4' : ''">{{ icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-title>Select All</v-list-tile-title>
</v-list-tile>
<v-divider class="mt-2"></v-divider>
<v-list-tile class="search-tile">
<v-text-field v-model="q" prepend-inner-icon="search" class="pt-0"></v-text-field>
</v-list-tile>
</template>
With regards to select-only functionality, you can use already supported scoped-slot item (see scoped slots in API docs) , and add select-only button yourself:
<v-select v-model="selected"
multiple
>
<template slot="item" slot-scope="data">
<v-list-tile-content>
<v-list-tile-title>
{{ data.item }}
</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action class="hidden">
<v-btn #click.stop="selected = [data.item]">ONLY</v-btn>
</v-list-tile-action>
</template>
</v-select>
Codepen, note that some CSS is added as well.
Expanded codepen with select-all workaround using watch, and one of the items is "All". So if we want array of selected without "All" we can do something like return this.selected.filter(v => v !== "All") in computed property or wherever it's needed.
As much as I can see this is a custom component. The one you are showing is probable made with angular + material like in this example: https://stackblitz.com/edit/angular-material-select-multi-c6vtux
So I think that you probably will end needing a component like vue-multiselect, that is fully featured and probably will accomplish what you need and more, the only thing is that you will need to work on it to use material styles.
https://github.com/shentao/vue-multiselect
https://vue-multiselect.js.org
I guess, that if you need more features, you might be able to customize the template https://vue-multiselect.js.org/#sub-custom-option-template
Now check ¨Custom configuration¨, there you will find some examples that will show you you can actually do something like the "only" with some effort.
This is the most complete component I have found for vuejs to handle multi select.
I hope it helps.
It's a feature that hasn't been implemented. Ask you desire feature HERE.
Hope it help you.
I want to use Xpath to replace my website menu of odoo 8.
I don't want to replace all the header, but only one element in the menu : The shop
When i inspect the element li , i see this :
<span data-oe-model="website.menu" data-oe-id="5" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" data-oe-translate="1">Shop</span>
I want to replace this element by creating a mega menu only for "shop".
I don't know how to use Xpath for this case.
Any solution ? Thank's
<template id="any_new_id" inherit_id="module_name.id_of_template">
<xpath expr="//span" position="replace">
your mega menu code
</xpath>
</template>
if you have any unique identifier then you can use it like this expr="//span[#id='span_id']" otherwise it replace all span tags
I am using a vaadin-grid in a Polymer 2.0 application with several columns that almost all have a vaadin-grid-sorter. Since I would like to give the user a chance to persist its sorting preferences my question is:
Can I set the column to sort by and the sort direction in code?
I had a short look at the grid source code but didn't find any (public) property for that.
I think there is a direction attribute for vaadin-grid-sorter, you can set the value to asc or desc. And set the path attribute for the property in the item used for sorting. For example:
<vaadin-grid-column>
<template class="header">
<vaadin-grid-sorter path="date" direction="desc">Date</vaadin-grid-sorter>
</template>
<template>[[item.date]]</template>
</vaadin-grid-column>