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 }}</span>
</v-chip>
<span
v-if="index === 1"
class="grey--text caption"
>(+{{ value.length - 1 }} others)</span>
</template>
</v-select>
Codepen
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 }}</span>
</v-chip>
<span
v-if="index === 1"
class="grey--text caption"
>(+{{ value.length - 1 }} others)</span>
</template>
</v-select>
Codepen
Share Improve this question edited Jun 29, 2020 at 20:00 Billal BEGUERADJ 22.8k45 gold badges123 silver badges140 bronze badges asked Oct 29, 2019 at 10:33 Varinder SohalVarinder Sohal 1,2926 gold badges26 silver badges51 bronze badges1 Answer
Reset to default 6Yes, it is possible to display only the selected headers from dropdown
working codepen here: https://codepen.io/chansv/pen/PooKMNb
<div id="app">
<v-app id="inspire">
<v-select
v-model="value"
:items="headers"
label="Select Item"
multiple
return-object
>
<template v-slot:selection="{ item, index }">
<v-chip v-if="index === 0">
<span>{{ item.text }}</span>
</v-chip>
<span
v-if="index === 1"
class="grey--text caption"
>(+{{ value.length - 1 }} others)</span>
</template>
</v-select>
<v-data-table
:headers="selectedHeaders"
:items="desserts"
class="elevation-1"
>
<template v-slot:item.calories="{ item }">
<v-chip :color="getColor(item.calories)" dark>
{{desserts.map(function(x) {return x.id; }).indexOf(item.id)}}
</v-chip>
</template>
</v-data-table>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
value: [],
selectedHeaders: [],
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
id: 3,
name: 'Frozen Yogurt',
calories: [237,456,789,789],
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
id: 83,
name: 'Ice cream sandwich',
calories: [237,456,789,789],
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
id: 11,
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
id: 545,
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
id: 909,
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
],
}
},
methods: {
getColor (calories) {
if (calories > 400) return 'red'
else if (calories > 200) return 'orange'
else return 'green'
},
},
watch: {
value(val) {
this.selectedHeaders = val;
}
},
created() {
this.selectedHeaders = this.headers;
}
})