最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to show hide columns of vuetify data table using v-select list? - Stack Overflow

programmeradmin0浏览0评论

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 badges
Add a ment  | 

1 Answer 1

Reset to default 6

Yes, 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;
  }
})
发布评论

评论列表(0)

  1. 暂无评论