From vuetify'e example, the icon shows up at right side of each row.
But when I making my own, the arrow showed up at the left side, I havent figured out how to control its position.
My code is like following
<v-data-table
:headers="headers"
:items="inputs"
item-key="id"
disable-pagination
dense
show-expand
single-expand
hide-default-footer
>
<template v-slot:[`item.value`]="{ item }">
<v-progress-linear
height="22"
></v-progress-linear
>
</template>
<template v-slot:expanded-item="{headers, item}">
<td :colspan="headers.length">
<InputDetails
:input="item"
/>
</td>
</template>
</v-data-table>
Added one more header into header list did the magic. { text: '', value: 'data-table-expand' },
Related
I'm trying to put a <v-menu> within the header slot of a <v-data-table>.
This menu would then show filter options (v-autocomplete) for that column.
When the menu is clicked, I can't click the autocomplete to show its items, because then the menu closes.
Is this not possible in Vuetify?
I've tried passing :close-on-click="false" and :close-on-content-click="false"
For example (CodePen):
<v-data-table :items="desserts" :headers="headers">
<template #[`header.calories`]>
<v-menu top>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on"><v-icon>filter</v-icon></v-btn>
</template>
<v-autocomplete class="black" :items="headers" />
</v-menu>
</template>
</v-data-table>
You can use Event.stopPropagation(), it will prevents further propagation of the current event
Eg:
<v-autocomplete #click="clickOnAutocomplete" class="black" :items="headers" />
...
methods: {
clickOnAutocomplete(e) {
e.stopPropagation();
},
}
....
this is a pen : https://codepen.io/wbuc/pen/eYNyXGa
I’m using the v-edit-dialog in the data table to edit a cell inline but when I start typing in the dialog that opens up, it closes directly after the first key press. What am I missing here?
thank you for help!
<v-data-table
v-model="selected"
:headers="headers"
:items="accounts"
:single-select="singleSelect"
item-key="email"
show-select
class="elevation-3"
>
<template v-slot:item.email="props">
<v-edit-dialog
:return-value.sync="props.item.email"
#save="save"
#cancel="cancel"
#open="open"
#close="close"
>
{{ props.item.email }}
<template v-slot:input>
<v-text-field v-model="props.item.email" label="Edit" single-line counter></v-text-field>
</template>
</v-edit-dialog>
</template>
</v-data-table>
i sloved this problem by myself
<v-data-table
.....
item-key="email" <!--Delete this or item-key="id"-->
we can't set a key ,and use it on the v-text-field
How to edit the group-by headers of Vuetify <v-data-table> ?
I need to hide the cross and set a custom title.
<v-data-table
:headers="headers"
:items="items"
group-by="category"
></v-data-table>
You just need to override default group.header slot.
<v-data-table
:headers="headers"
:items="items"
group-by="category"
>
<template v-slot:group.header="{items, isOpen, toggle}">
<td :colspan="headers.length">
<v-icon #click="toggle">
{{ isOpen ? 'mdi-minus' : 'mdi-plus' }}
</v-icon>
<span>Your custom header w/o cross</span>
</td>
</template>
</v-data-table>
Check vuetify docs in Slots category to get full list of available props in this slot.
I want to have a v-text-field inside of a v-tooltip so when a user is shown a tooltip they can enter information inside of the tooltip, but no clicks or input seem to register for the elements inside of the tooltip
<v-tooltip top :open-on-click="true" :open-on-hover="false">
<template v-slot:activator="{ on }">
<v-list-item-content v-on="on">
<v-list-item-title>Title</v-list-item-title>
<v-list-item-subtitle>Subtitle</v-list-item-subtitle>
</v-list-item-content>
</template>
<v-text-field></v-text-field>
</v-tooltip>
Actually tool-tips are used only for show some tips, so the all pointer events will be blocked by css pointer-events: none;, We need to override this style with our CSS.
see my working example here
Template
<v-tooltip v-model="show" top>
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon color="grey lighten-1">mdi-cart</v-icon>
</v-btn>
</template>
<span>Programmatic tooltip</span>
<v-text-field
label="Regular"
></v-text-field>
</v-tooltip>
CSS
.v-tooltip__content{
pointer-events: all;
}
The v-tooltip shows a disabled item when you hover, and the addition of events to this item will not work. You can achieve a similar effect v-menu.
<v-menu bottom right
:close-on-content-click="false">
<template v-slot:activator="{ on }">
<v-list-item-content v-on="on">
<v-list-item-title>Title</v-list-item-title>
<v-list-item-subtitle>Subtitle</v-list-item-subtitle>
</v-list-item-content>
</template>
<v-card class="pa-3">
<v-text-field hide-details v-model="textVal" #change="update"></v-text-field>
</v-card>
</v-menu>
methods: {
update(){
console.log(this.textVal)
}
}
Here is the snippet from the template for my view:
<v-card>
<v-card-text>
<v-treeview selectable hoverable :items="items" :open.sync="open">
<template v-slot:prepend="{ item }">
<v-icon>{{item.icon}}</v-icon>
</template>
<template v-slot:label="{ item }">
<v-badge :content="item.count">{{item.name}}</v-badge>
</template>
</v-treeview>
</v-card-text>
</v-card>
The badge is clipped vertically.
Is there a way to prevent clipping?
Found an easy solution. Add the following to the vue file.
<style lang="scss">
.v-treeview-node__content {
line-height: 4;
}
</style>
<v-badge :content="item.count" inline>{{item.name}}</v-badge>
Adding inline prop to v-badge solves the problem. Please have a look here.