在vue中使用vuetify数据表动态地显示表列。

Posted 2021-04-11

看着像例子。

如何使用v-select list来显示vuetify数据表的隐藏列

我做了一个非常类似的东西，但由于某些原因，当我改变头数据时，表不会被重新渲染。

https: /codepen.ioMeff1penvYLNYWR

<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数组，它作为它的项目属性被绑定到数据表上。selectedData作为一个计算属性返回，当选择列表发生变化时，它在watcher方法中被改变了。当底层属性发生变化时，计算属性是不是也应该重新评估？

答案

我想你在给你的outa范围的selectedHeaders赋值后，你在你的watcher中松开了对this.selectedHeaders的引用？因此，你的模板从来没有得到任何变化，表现为预期。

更改。

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

改为

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

或

     this.selectedHeaders = val

另一答案

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