Question

看起来像个例子：

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

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

<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返回为一个计算的属性，以及在观察者方法中，当选择列表的变化被改变。但是，数据表永远不会更新。每当基础属性发生变化时，也不应该重新计算计算的属性吗？

Answer 1

我认为在将值分配给超出范围的selectedHeaders后，您在观察程序中失去了对this.selectedHeaders的引用？因此，您的模板永远不会发生任何变化，并且不会像预期的那样运行。

更改：

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

收件人

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

或

     this.selectedHeaders = val

Answer 2

尝试在data（）方法中初始化数据

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

2 个答案: