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

【问题标题】：Dynamically show/hide table columns in vue using vuetify data table使用 vuetify 数据表在 vue 中动态显示/隐藏表列
【发布时间】：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 方法中更改。但是，数据表永远不会更新。当底层属性也发生变化时，计算属性不应该重新评估吗？

【问题讨论】：

标签： typescript vue.js vue-component vuetify.js

【解决方案1】：

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

变化：

watch: {
   value(val) {
      selectedHeaders = val;

到

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

或者

     this.selectedHeaders = val

【讨论】：

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

【解决方案2】：

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

【讨论】：