使用 vuetify 数据表在 vue 中动态显示/隐藏表列

Posted 2023-02-23

【中文标题】使用 vuetify 数据表在 vue 中动态显示/隐藏表列

【英文标题】：Dynamically show/hide table columns in vue using vuetify data table

【发布时间】：2020-09-26 13:41:59

【问题描述】：

看起来像例子：

How to show hide columns of vuetify data table using v-select list

我做了一些非常相似的东西，但是由于某种原因，当我更改标题数据时，表格不会重新呈现：

https://codepen.io/Meff1/pen/vYLNYWR

<template>
  <v-container>
    <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">(+ value.length - 1  others)</span>
      </template>
    </v-select>
    <br />
    <v-data-table :headers="this.selectedHeaders" :items="xyz">
      <template slot="items" slot-scope="props">
        <td
          v-for="header in this.selectedHeaders"
          :key="header"
          v-show="show[header.text]"
        > props.item[header.value] </td>
      </template>
    </v-data-table>
  </v-container>
</template>


<script lang="ts">
const charData: Array<object> = [
  
    id: 10,
    firstName: "Kyle",
    lastName: "Broflovski",
    saying: "Goddamnit Cartman!"
  ,
  
    id: 20,
    firstName: "Eric",
    lastName: "Cartman",
    saying: "Screw you guys, Im going home"
  ,
  
    id: 30,
    firstName: "Stanley",
    lastName: "Marsh",
    saying: "WTF"
  ,
  
    id: 40,
    firstName: "Kenny",
    lastName: "McCormick",
    saying: "hmhpmhphmphmhp"
  
];

let headers: Array<object> = [];
let selectedHeaders: Array<object> = [];
const show: any = ;
const value: Array<object> = [];
let selectedData: Array<object> = [];

import Vue from "vue";

export default Vue.extend(
  name: "PFTable",
  data: () => (
    charData,
    headers,
    value,
    selectedHeaders,
    selectedData,
    show
  ),

  computed: 
    xyz: () => 
      return selectedData;
    
  ,

  watch: 
    value(val) 
      selectedHeaders = val;

      const res = selectedHeaders.map(x => x.text);
      selectedData = [];

      for (const k in charData) 
        const element: any = charData[k];

        const filtered = Object.keys(element)
          .filter(key => res.includes(key))
          .reduce((obj: any, key: any) => 
            obj[key] = element[key];
            return obj;
          , );

        selectedData.push(filtered);
      
    
  ,

  beforeCreate() 
    headers = [];
    const headersData = Object.keys(charData[0]);

    headersData.forEach(element => 
      headers.push( text: element, value: element );
    );

    selectedHeaders = headers;
    selectedData = charData;
  
);
</script>

我找不到任何方法来显示/隐藏选择列表中选定的列。

我有 selectedData 数组，它作为它的 items 属性绑定到数据表。 selectedData 作为计算属性返回，并在选择列表更改时在 watcher 方法中更改。 但是，数据表永远不会更新。当底层属性也发生变化时，计算属性不应该重新评估吗？

【参考方案1】：

我认为您在为您的 outa 范围 selectedHeaders 分配值后失去了对 this.selectedHeaders 的引用？因此，您的模板永远不会发生任何变化并且会按预期运行。

变化：

watch: 
   value(val) 
      selectedHeaders = val;

到

     selectedHeaders.splice(0).push(...val) 

或者

     this.selectedHeaders = val

【讨论】：

我什至不会猜你是怎么知道的。它解决了这个问题。如果在 vue 组件中使用，我认为这是多余的？

【参考方案2】：

尝试在 data() 方法中初始化数据