javascript之如何使用 v-select 列表显示 vuetify 数据表的隐藏列

我正在处理 VueJs 模板，我有一个 Vuetify 数据表，我已经创建了一个表头的选择列表。

在选择列表的基础上，我想显示和隐藏表格的列，如果未选中任何标题，那么它将从表格​​中隐藏，就像选中时一样，然后将出现在表格中。

选择列表:

<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

请您参考如下方法:

是的，可以只显示下拉列表中选定的标题

在这里工作代码笔: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; 
  } 
})