vuetify.js

问题 I am working on VueJs template and I have one data table of Vuetify I have created a select list of headers of tables. On the basis of the select list, I want to show and hide columns of the table if any heading is unchecked then that will hide from the table same as if checked then that will appear in table. Select List: <v-select v-model="value" :items="headers" label="Select Item" multiple > <template v-slot:selection="{ item, index }"> <v-chip v-if="index === 0"> <span>{{ item.text }}<

问题 I'm using the VuetifyJS Data Table and I need to move the entries of each header cell as close as possible to each other. I tried to add a width to each header but that didn't work - it seems there is a predefined width one can't go below. Update: This is how it should look like - the margin between each row should be fixed at 10px: Here is a CodePen example: https://codepen.io/anon/pen/ejEpKZ?&editors=101 <div id="app"> <v-app id="inspire"> <v-data-table :headers="headers" :items="desserts"

问题 I'm using the VuetifyJS Data Table and I need to move the entries of each header cell as close as possible to each other. I tried to add a width to each header but that didn't work - it seems there is a predefined width one can't go below. Update: This is how it should look like - the margin between each row should be fixed at 10px: Here is a CodePen example: https://codepen.io/anon/pen/ejEpKZ?&editors=101 <div id="app"> <v-app id="inspire"> <v-data-table :headers="headers" :items="desserts"

问题 I am working on Vuetify.js and I am a newbie in Vue, I referred this document Vuetify Dialogs for creating dialog and solution of Matheus Dal'Pizzol from this link Open a Vuetify dialog from a component template in VueJS to separate it to the component. The result I have child component as dialog as below Parent <template> <v-container fluid> <v-row dense> <v-col cols="12"> <v-btn large color="success">Add product</v-btn> </v-col> <v-col cols="3" v-for="product in products" :key="product.id">

问题 I'm using the VuetifyJs for VueJS and I'm trying to display checkbox in table format from an array of objects. Desired Output shown below : When 'All Users' is checked all the checkboxes should be checked. I created a row layout and divided this row into two flex boxes so I have the structure of row with two columns. I loop using 'v-for' and for every row display the value of the current index and the next index. But the last entry is repeated the next time the loop is iterated. The closest I

问题 I have a card inside a dialog with a title and a table (it will be more complex in the future). The dialog has a set width="80vw". I want neither the dialog nor the card to scroll, but I'd like the table to scroll with the header fixed, so you can always see column names. When I set fixed height to the table in pixels, it does what I want automatically, however using overflow-y or percent height does nothing. How can I make the table fit the card? <v-card height="80vh"> <v-card-title> Files <

问题 While making list screen with v-list. I stuck scrolling v-list-title items. I'm using VueJS and vuetifyjs. My code snip is at below. https://codepen.io/badsaarow/pen/aaRaxe?editors=1010 My aim is that toolbar area is fixed, and only v-list-titles are scrollable. <div id="app"> <v-app id="inspire"> <v-container fluid grid-list-lg> <v-layout row wrap> <v-flex xs12 sm12 md6> <v-card> <v-toolbar color="light-blue" light extended> <v-btn fab small color="cyan accent-2" bottom right absolute @click

问题 My goal is to create a Vuetify 2 data table from a list of car models. Data needs to be grouped by vendor with a customized group header row and also the item rows for each car model needs to be customized. Below is a very reduced example to show my main problem which is that Vuetify fully ignores my template for the item-slot and uses the default behaviour instead . How can I make Vuetify use that template as well with avoiding to use a single template for each item column? ... because in my

问题 My goal is to create a Vuetify 2 data table from a list of car models. Data needs to be grouped by vendor with a customized group header row and also the item rows for each car model needs to be customized. Below is a very reduced example to show my main problem which is that Vuetify fully ignores my template for the item-slot and uses the default behaviour instead . How can I make Vuetify use that template as well with avoiding to use a single template for each item column? ... because in my

问题 This is a Vue.js project and I am using Vuetify. I have a navigation drawer. At 1263px screen width the resize-watcher kicks in and the drawer closes. I can prevent this using 'permanent'. What I would like it to do is instead of closing the drawer switch to mini. here is my existing code. <v-navigation-drawer clipped :mini-variant="mini" v-model="drawer" permanent app hide-overlay > <v-list dense> <v-list-tile v-for="(item, index) in authorized" :key="index" @click="sendComponent(item)" > <v