根据用户选择隐藏和显示表格列答案

【问题标题】：Hide and show table column based on user selection根据用户选择隐藏和显示表格列
【发布时间】：2023-03-12 21:16:01
【问题描述】：

我正在尝试根据用户选择隐藏和显示表格列。但它没有按预期工作。这是codepen文件的链接。

https://codepen.io/nigel1995/pen/XWKbqoe?editors=1111

<div id="app">
  <div v-for="item in columnHeaders">
    <label>
      <input type='checkbox' :value='item.value' v-model="selectedType"> {{ item.text }}
    </label>
  </div>

  <table class="selection-div">
    <tr>
      <template v-for="item in columnHeaders">
        <th v-if="showHeader(item)">{{ item.text }}</th>
      </template>
    </tr>
     <tr v-for="desert in deserts">
        <td v-if="!hideCol(desert)">{{ desert.name }}</td>
       <td v-if="!hideCol(desert)">{{ desert.fat }}</td>
    </tr>
  </table>
</div>

new Vue({
  el: '#app',
  data: {
    selectedType: [],
     columnHeaders: [
        { text: 'Name', value: 'name', show: true },
        { text: 'Fat (g)', value: 'fat', show:true },
      ],
      deserts: [
        {
          name: 'Frozen Yogurt',
          fat: 6.0,
        },
        {
           name: 'Golden Yogurt',
           fat: 6.0,
        },
        {
           name: 'Tasty Yogurt',
           fat: 6.0,
        }
      ]
  },
  
  
  methods: {
    hideCol(row){
      const t = Object.keys(row)[0];
      return this.selectedType.includes(t);
    },
    
    showHeader(val){
     return (val.show && !this.selectedType.includes(val.value));       
    } 
  },
});

我想要做的是动态显示表格列，而不是在每一列中检查它，因为表格标题将来会是动态的。任何方向将不胜感激。

【问题讨论】：

标签： javascript vue.js html-table vuejs2

【解决方案1】：

通过使用computed 方法，我们可以自动创建visibleColumns 数据元素。没有选中列时默认为所有列，否则只返回选中列。

vue 模板然后检查列是否在visibleColumns 中。它还会根据visibleColumns自动创建数据列。

<div id="app">
  <div v-for="item in columnHeaders">
    <label>
      <input type='checkbox' :value='item.value' v-model="selectedType"> {{ item.text }}
    </label>
  </div>

  <table class="selection-div">
    <tr>
      <th 
        v-for="item in columnHeaders"
        v-if="visibleColumns.includes(item.value)">
        {{ item.text }}
      </th>
    </tr>
     <tr v-for="desert in deserts">
       <td v-for="column in visibleColumns">{{ desert[column] }}</td>
    </tr>
  </table>
</div>

new Vue({
  el: '#app',
  data: {
     selectedType: [],
     columnHeaders: [
        { text: 'Name', value: 'name' },
        { text: 'Fat (g)', value: 'fat' },
      ],
      deserts: [
        {
          name: 'Frozen Yogurt',
          fat: 6.0,
        },
        {
           name: 'Golden Yogurt',
           fat: 6.0,
        },
        {
           name: 'Tasty Yogurt',
           fat: 6.0,
        }
      ]
  },
  
  computed: {
    visibleColumns() {
      if(this.selectedType.length === 0) {
        return this.columnHeaders.map(c => c.value);
      }
      
      return this.selectedType;
    }
  },

});

View Codepen

【讨论】：

嗨帕特里克。非常感谢您的支持。只是一个查询。如何使列动态而不是检查每个字段，因为列标题可以是动态的？
重新阅读您的问题并进行更新。您的代码有两个变化：计算方法具有默认/选定列，并根据可见列方法动态显示标题和数据列。
谢谢你的传奇！

【解决方案2】：

您需要传递要隐藏的对象键：

 <tr v-for="desert in deserts">
    <td v-if="!hideCol('name')">{{ desert.name }}</td>
   <td v-if="!hideCol('fat')">{{ desert.fat }}</td>
</tr>

然后检查该键是否应该可见：

hideCol(key){
  return this.selectedType.includes(key);
},

【讨论】：