如何使用 v-select 列表显示 vuetify 数据表的隐藏列? [英] How to show hide columns of vuetify data table using v-select list?

问题描述

我正在研究 VueJs 模板，我有一个 Vuetify 数据表，我创建了一个表标题的选择列表.

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

选择列表:

Codepen

解决方案

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

在这里使用 codepen:https://codepen.io/chansv/pen/PooKMNb

<v-app id="inspire"><v-选择v-model="值":items="标题"标签=选择项目"多返回对象><template v-slot:selection="{ item, index }"><v-chip v-if="index === 0"><span>{{ item.text }}</span></v-chip><跨度v-if="索引 === 1"class="灰色--文字说明">(+{{ value.length - 1 }} 其他)</span></模板></v-select><v-数据表:headers="selectedHeaders":items="甜点"类=海拔-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></模板></v-data-table></v-app>
新的 Vue({el: '#app',vuetify: 新的 Vuetify(),数据 () {返回 {价值: []，selectedHeaders: [],标题: [{text: '甜点(100 克份量)',对齐:'左'，可排序:假，值:'名称'，},{文本:'卡路里'，值:'卡路里'}，{ text: 'Fat (g)', value: 'fat' },{ text: 'Carbs (g)', value: 'carbs' },{文本:'蛋白质(g)'，值:'蛋白质'}，{ text: '铁 (%)', 值: '铁' },],甜点:[{编号:3，name: '冷冻酸奶',卡路里:[237,456,789,789]，脂肪:6.0，碳水化合物:24，蛋白质:4.0，铁:1%"，},{编号:83，name: '冰淇淋三明治',卡路里:[237,456,789,789]，脂肪:9.0，碳水化合物:37，蛋白质:4.3，铁:1%"，},{编号:11，name: 'Eclair',卡路里:262，脂肪:16.0，碳水化合物:23，蛋白质:6.0，铁:7%"，},{编号:545，name: '纸杯蛋糕',卡路里:305，脂肪:3.7，碳水化合物:67，蛋白质:4.3，铁:8%"，},{编号:909，name: '姜饼',卡路里:356，脂肪:16.0，碳水化合物:49，蛋白质:3.9，铁:16%"，},],}},方法: {getColor(卡路里){如果(卡路里> 400)返回红色"否则如果(卡路里> 200)返回橙色"否则返回绿色"},},手表: {价值(价值){this.selectedHeaders = val;}},创建(){this.selectedHeaders = this.headers;}})

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

解决方案

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;
  }
})

这篇关于如何使用 v-select 列表显示 vuetify 数据表的隐藏列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！